账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    Vue中，在 methods 中修改了 data 中的数据，但在 HTML 中无法使用 v-for
    76
    0
    Vue 代码如下：let vue = new Vue({ el: "#root_container", data: { billCategories: [], billAccount: [], bills: [] }, created() { this.getBillOverview() }, methods: { getBillOverview: function () { $.ajax({ url: "https://www.xxxxxxx.xxx:1443/xxx/web/GetOverview", success: function (result) { if (result["result"]) { let resultObject = JSON.parse(JSON.stringify(result["resultObject"])); let categories = JSON.parse(JSON.stringify(resultObject["billCategories"])); for (let i = 0; i < categories.length; i++) { let obj = JSON.stringify(categories[i]); let category = JSON.parse(obj); vue.billCategories.push(category) } } else { layer.msg("出错了，请稍候重试..."); } } }); } } });但是在 HTML 中使用 v-for 循环数据时却出了问题，HTML 如下：<div style="display:flex;flex-direction:column ;width: 80%;margin-left:10%;margin-right:10%;" id="root_container"> <a>分类</a> <div class="layui-input-inline"> <select name="quiz"> <div> <option value="全部">全部</option> </div> <div class="bill_category_item_container" v-for="item in billCategories"> <option value="">{{billCategories.length}}</option> </div> </select> </div></div>{{billCategories.length}} 显示为 0，如果是{{item.categoryName}}则会提示"item is not defined"，因为billCategories中没有数据，自然会发出这个提示了，但是如果在 HTML 中其他位置使用：<div style="display:flex;flex-direction:column ;width: 80%;margin-left:10%;margin-right:10%;" id="root_container"> <a>{{billCategories}}</a></div>则又会将所有内容打印出来，请问这是怎么回事儿？我已经在 methods 的 getBillOverview 方法中修改了 billCategories 中的数据，但是在 v-for 中为什么获取不到呢？
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 用钱买、真情 普通会员 1楼

      在 Vue 中，当你在 methods 中修改了 data 中的数据后，但你在 HTML 中无法使用 v-for 来渲染数组或对象，通常是因为你没有正确地处理 Vue 脚手架在 HTML 代码中使用的 Vue 实例。以下是一些常见的解决方法：

      1. 模板渲染器：

      在 Vue 文件中，你可以在 <template> 标签中定义一个模板（template），在模板中使用 v-for 来遍历和渲染数据。例如：

      html <template> <div v-for="item in items"> <p>{{ item.name }}</p> <p>{{ item.age }}</p> </div> </template>

      在 JavaScript 文件中，你可以通过 this.items 访问 Vue 实例中的数据：

      javascript export default { data() { return { items: [ { name: 'Item 1', age: 25 }, { name: 'Item 2', age: 30 }, { name: 'Item 3', age: 35 }, ]; }; }, methods: { updateItem(item) { this.items[item.name] = item.age; }, }, };

      在模板中，你可以像这样渲染数据：

      ```html

      {{ item.name }}

      {{ item.age }}

      ```

      现在，当你在 HTML 中使用 v-for 来遍历 items 数组时，Vue 将会正确渲染这些数据，并在每个元素中包含对应对象的属性。

      1. Vue 实例：

      在 Vue 文件中，你可以直接在 JavaScript 文件中修改 Vue 实例的 data 属性，而不必修改 HTML 代码。例如：

      javascript export default { data() { return { items: [ { name: 'Item 1', age: 25 }, { name: 'Item 2', age: 30 }, { name: 'Item 3', age: 35 }, ]; }; }, methods: { updateItem(item) { this.items[item.name] = item.age; }, }, };

      在 Vue 文件中，你可以像这样直接访问和修改 Vue 实例的 items 数组：

      ```html

      {{ item.name }}

      {{ item.age }}

      ```

      现在，当你在 HTML 中使用 v-for 来遍历 items 数组时，Vue 将会正确渲染这些数据，并在每个元素中包含对应对象的属性。

      注意：Vue 的 v-for 绑定器默认会遍历数据的所有属性，如果你只想遍历对象的某个特定属性，你可以使用数组的索引或 key 属性来指定。例如：

      ```html

      {{ item.name }}

      {{ item.age }}

      {{ item.name }}

      {{ item.age[0] }}

      ```

      这将会遍历 items 数组中的所有对象，但只遍历第一个对象的 name 属性。

    0 打赏 回复
    • 許下你聽不到的承諾 普通会员 2楼

      在 Vue 中，当你在 methods 中修改了 data 中的数据后，但你在 HTML 中无法使用 v-for 来渲染数组或对象，通常是因为你没有正确地处理 Vue 脚手架在 HTML 代码中使用的 Vue 实例。以下是一些常见的解决方法：

      1. 模板渲染器：

      在 Vue 文件中，你可以在 <template> 标签中定义一个模板（template），在模板中使用 v-for 来遍历和渲染数据。例如：

      html <template> <div v-for="item in items"> <p>{{ item.name }}</p> <p>{{ item.age }}</p> </div> </template>

      在 JavaScript 文件中，你可以通过 this.items 访问 Vue 实例中的数据：

      javascript export default { data() { return { items: [ { name: 'Item 1', age: 25 }, { name: 'Item 2', age: 30 }, { name: 'Item 3', age: 35 }, ]; }; }, methods: { updateItem(item) { this.items[item.name] = item.age; }, }, };

      在模板中，你可以像这样渲染数据：

      ```html

      {{ item.name }}

      {{ item.age }}

      ```

      现在，当你在 HTML 中使用 v-for 来遍历 items 数组时，Vue 将会正确渲染这些数据，并在每个元素中包含对应对象的属性。

      1. Vue 实例：

      在 Vue 文件中，你可以直接在 JavaScript 文件中修改 Vue 实例的 data 属性，而不必修改 HTML 代码。例如：

      javascript export default { data() { return { items: [ { name: 'Item 1', age: 25 }, { name: 'Item 2', age: 30 }, { name: 'Item 3', age: 35 }, ]; }; }, methods: { updateItem(item) { this.items[item.name] = item.age; }, }, };

      在 Vue 文件中，你可以像这样直接访问和修改 Vue 实例的 items 数组：

      ```html

      {{ item.name }}

      {{ item.age }}

      ```

      现在，当你在 HTML 中使用 v-for 来遍历 items 数组时，Vue 将会正确渲染这些数据，并在每个元素中包含对应对象的属性。

      注意：Vue 的 v-for 绑定器默认会遍历数据的所有属性，如果你只想遍历对象的某个特定属性，你可以使用数组的索引或 key 属性来指定。例如：

      ```html

      {{ item.name }}

      {{ item.age }}

      {{ item.name }}

      {{ item.age[0] }}

      ```

      这将会遍历 items 数组中的所有对象，但只遍历第一个对象的 name 属性。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部