Vue：对嵌套列表对象做出反应答案

【问题标题】：Vue: Reacting to a nested list objectVue：对嵌套列表对象做出反应
【发布时间】：2020-08-10 23:27:53
【问题描述】：

我有一个名为links 的对象数组。它的形状是这样的：

links = [
   {'title': "foo", 'url': "http://www.com"},
   {'title': "foo1", 'url': "http://www2.com"},
]

我正在使用v-for 将此数据填充到列表中。

<div v-for="(item,index) in links">
    <input :value="item.url" />
</div>

我有 2 个问题：首先，我在 Vue Chrome 工具中没有看到我的 links 数据发生变化。我假设我在“价值”方面做错了什么。我正在考虑使用“v-model”，但如何处理动态数量的项目。

【问题讨论】：

“我没有看到我的links 数据发生变化”是什么意思？换哪里？您的意思是当您在文本字段中输入新值时？
嗨菲尔。是的，我正在检查links，当我在输入中输入新值时，Vue 工具中的links 数据不会改变。看起来好像它没有捕捉到/对变化做出反应

标签： vue.js vuejs2

【解决方案1】：

绑定:value 只是一种方式，从data 到您的HTML。

如果你想要双向绑定，你确实可以使用v-model

new Vue({
  data: () => ({
    links: [{
        'title': "foo",
        'url': "http://www.com"
      },
      {
        'title': "foo1",
        'url': "http://www2.com"
      },
    ]
  })
}).$mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <div v-for="(item, index) in links" :key="index">
    <input v-model="item.url" />
  </div>
  <pre>links = {{ links }}</pre>
</div>

【讨论】：