如何在不同的数组 vue 3 上建立 v-model

Question

您好，我正在尝试使用 v-model 作为 Vue 3 对象数组中对象值的输入。复杂性在于对象首先由函数处理。并且每次对输入进行更改时都需要对其进行处理。这是我的代码（和一个沙箱 link）：

<template>
  <div id="app">
    <div v-for="param in process(parameters)" :key="param">
    Name :   {{param.name}} Value : <input v-model="param.value">
    </div>
    {{parameters}}
  </div>
</template>
<script>


export default {
  name: "App",
  data(){
    return{
    parameters :[
      {'name':'Richard Stallman','value':'cool dude'},
      {'name':'Linus Torvalds','value':'very cool dude'},
      {'name':'Dennis Ritchie','value':'very very cool dude'}
      ]
    }
  },
  methods:{
    process(parameters){
      const results = parameters.map( param =>{
        return {name:param.name+' extra text',
                value:param.value+' extra text',
                }
      })
      return results
    }
  }
};
</script>

我只想在输入中输入某些内容时更改原始参数。也许@change 可能有用。但是我没有找到@change 的修复方法。有谁知道我的问题的解决方案？提前致谢。

Answer 1

我不确定我是否理解此人是否应该能够see/edit您在处理方法中添加的文本。

无论如何，我认为这个代码示例应该可以解决您的问题:

<template>
  <div id="app">
    <div v-for="param in parameters" :key="param.name">
      Name : {{ param.name }} Value : <input v-model="param.value" />
    </div>
    {{ process }}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      parameters: [
        { name: "Richard Stallman", value: "cool dude" },
        { name: "Linus Torvalds", value: "very cool dude" },
        { name: "Dennis Ritchie", value: "very very cool dude" },
      ],
    };
  },
  computed: {
    process: function() {
      const results = this.parameters.map((param) => {
        return {
          name: param.name + " extra text",
          value: param.value + " extra text",
        };
      });
      return results;
    },
  },
};
</script>

因此，我们直接遍历参数数组，像您一样在值上添加输入。当您输入输入时，您会实时更新链接到它的参数。

我刚把你做的方法改成了计算方法。这样，每次更新参数时，“进程”也会更新，因为它直接依赖于它。

我还删除了传递“parameters”参数，它在组件数据中，您可以直接访问它。

这样，就像使用任何变量一样使用“过程”，您将始终拥有更新的参数 + 添加到 em 的内容。

Answer 2

使用 computed 属性获取数据的反应状态。

工作演示：

new Vue({
  el: '#app',
  data: {
    parameters :[
      {'name':'Richard Stallman','value':'cool dude'},
      {'name':'Linus Torvalds','value':'very cool dude'},
      {'name':'Dennis Ritchie','value':'very very cool dude'}
    ]
  },
  computed: {
    process() {
      const results = this.parameters.map((param) => {
        return {
            name: param.name + ' extra text',
          value: param.value + ' extra text'
        }
      });
      return results;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="param in process" :key="param">
    Name : {{param.name}}
    Value : <input v-model="param.value">
  </div><br>
  <strong>Orinigal Data :</strong> {{parameters}}
</div>

如何在不同的数组 vue 3 上建立 v-model

how to v-model on different array vue 3

html

javascript

vue.js

vuejs3