我有和数组的对象,这是不确定数组,可能会推动或拼接的东西在这里.我需要用vue将对象的属性绑定到输入dom,但似乎不起作用.

heres the data

   items : [
     { prop1: 123, prop2: 'test', prop3: 'foo' },
     { prop1: 321, prop2: 'tset', prop3: 'bar' },
   ]

}

trying to do


   <li v-for="item in items"> 
      {{ item.prop2 }} 
      <input type="text" v-model="item.prop1">
   </li>

</ul>

推荐答案

你可以用索引来做.例如:

   <li v-for="(item, index) of items"> 
      {{ item.prop2 }} 
      <input type="text" v-model="items[index].prop2">
   </li>

另一种方法是使用一个事件,比如v-on:input或者简单的@input on yout input a call一个方法,在items中找到你的项目来改变你的prop2值.

   <li v-for="(item, index) of items"> 
      {{ item.prop2 }} 
      <input type="text" @input="updateMyProp(index)">
   </li>
   ...
   methods: {
     updateMyProp ($event, index) {
       // your update logic here
       // you can use 'this.items', Object.assign, Vue.set, etc... to update your value
     }
   ...

Vue.js相关问答推荐

当props 的值改变时如何更新类'

带 Bootstrap 的 Vue js,导航栏菜单不起作用

将 html 文件移出 dist vite 中的 src 文件夹

vue 不重新渲染数据更改

如何在 v-for 指令切换状态下安全地制作包含附加到对象的复选框的列表(W/O 切换列表中的其他复选框)?

带有热重载的 docker 容器上的 Vue.js 应用程序

使用带有 v-date-picker 的 new Date() 不起作用

使用 vuex 更新数据

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

Laravel Blade 模板将数据传递给 Vue JS 组件

在Vue.js中从父组件执行子方法

如何将 git hash 添加到 Vue.js 组件

简单的点击功能不触发

Vue Js如何在单个文件模板中使用mixins?

使计算的 Vue 属性依赖于当前时间?

克隆元素并附加到 DOM 的正确方法

仅在提交时验证 vuetify 文本字段

Vue v-model 不响应 BS4 单选按钮组

用于身份验证标头的 vue-resource 拦截器

在~/components/AddPlaceModal.vue中找不到导出AddPlaceModal