Question

将输入值添加到数据结构中：

<template>
    <input 
        v-for="item in this.inputValues" :key="item.id"
        v-model="item.value"
    />
</template>

<script>
export default {
    data() {
        return {
            inputValues: [
            { id: 1 },
            { id: 2 },
            { id: 3 },
            { id: 4 },
            { id: 5 },
            { id: 6 }],
        }
    },
};
</script>

然后想要一个本质上可以做到的函数：

    {{ this.inputValues[0].value }}
    {{ this.inputValues[1].value }}
    {{ this.inputValues[2].value }}
    {{ this.inputValues[3].value }}
    {{ this.inputValues[4].value }}
    {{ this.inputValues[5].value }}

我希望将其输出到一个字符串中，并使该字符串在输入时仅具有每个值，并且其输入顺序正确。

Answer 1

您可以像下面这样使用计算来连接您的值：

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
    data: {
          inputValues: [
          { id: 1 },
          { id: 2 },
          { id: 3 },
          { id: 4 },
          { id: 5 },
          { id: 6 }],
    },
    computed: {
        mergedValues() {
          return this.inputValues.map(v => v.value).join('');
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <input 
        v-for="item in inputValues" :key="item.id"
        v-model="item.value"
    />
    {{mergedValues}}
</div>

或者更好的是，您可以遍历模板中的数组。

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
    data: {
          inputValues: [
          { id: 1 },
          { id: 2 },
          { id: 3 },
          { id: 4 },
          { id: 5 },
          { id: 6 }],
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <input 
        v-for="item in inputValues" :key="item.id"
        v-model="item.value"
    />
    <p v-for="item in inputValues">
      {{item.value}}
    </p>
</div>

此外，您无需在模板中执行this.inputValues，只需执行以下操作：inputValues。

Answer 2

尝试这样的事情。此代码尚未经过测试，如果不起作用，则类似于psuedocode

<input v-for="($event, index) in inputValues" :key="item.id" v-on:keyup.enter="save(even, item)" />

然后在save方法中，您会得到类似的信息

save(event, item) {
 this.inputValues[index].value = event.value;
}

从输入中提取动态数据到字符串

2 个答案: