使用动态 vue 输入的新值

Question

我正在检索对象的一个​​对象，对于每个对象，我都会制作一个文本输入列表来编辑它们的值。我的问题是输入的值没有改变所以它只提交起始值，我怎样才能使输入值动态？

<ul>
    <li v-for="variable in variables">
        <input type="text" :value="variable.value" />
        <button @click="updateVariable(variable.id, variable.value)">Update</button>
    </li>
</ul>

...

methods: {
    updateVariable(id, value) {
        axios.post('/destination', {
                params: {
                    id: id,
                    value: value
                }
            })
                .then((response) => {
                    console.log(response);
                })
                .catch((error) => {
                    console.log(error);
                })
    }
}

Answer 1

你只是给每个输入一个初始值，但你没有将它绑定到任何反应数据属性。

使用 v-model 指令来使用输入绑定并将 Vue 的反应性应用于输入：

<ul>
    <li v-for="variable in variables">
        <input type="text" v-model="variable.value" />
        <button @click="updateVariable(variable.id, variable.value)">Update</button>
    </li>
</ul>

请注意variables 数组必须在组件的data object 中声明才能正常工作。

Answer 2

使用v-model，:value 不会跟踪更改

// Fake axios to debug with
const axios = {
  post(ep = "", data) {
    console.log(`would send \n${JSON.stringify(data)}\nto ${ep}`);
    return Promise.resolve("OK");
  }
};

const app = new Vue({
  el: "#app",
  data() {
    return {
      variables: {
        foo: {
          id: "foo",
          value: "bar"
        },
        fizz: {
          id: "fizz",
          value: "buzz"
        }
      }
    };
  },
  methods: {
    updateVariable(id, value) {
      axios.post('/destination', {
          params: {
            id: id,
            value: value
          }
        })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        })
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="variable in variables">
      <input type="text" v-model="variable.value" />
      <button @click="updateVariable(variable.id, variable.value)">Update</button>
    </li>
  </ul>
</div>