Vue中动态输入数据提取为有序纯值字符串的实现需求

Hey there, let's get this sorted out. I'll break down the steps to meet your requirements clearly:

1. Fix Initial Data Structure (Avoid Undefined Values) #

First, your existing Vue component sets up the inputs but doesn't initialize the value property in each inputValues item. While Vue will add it dynamically when the user types, it's cleaner to initialize each item with an empty string to prevent any unexpected undefined values later. Here's the updated data section:

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

2. Write the Function to Generate the Ordered String #

Next, add a method that collects all the input values in order and converts them into a single string. You can do this using Array.map() to extract each value, then Array.join() to combine them. If you want to separate values with something like commas, just pass that to join()—otherwise, an empty string will concatenate them directly.

Here's the full component with the method included, plus a button to trigger it (or you can use it as a computed property for automatic updates):

<template>
  <div>
    <input v-for="item in inputValues" :key="item.id" v-model="item.value" />
    <button @click="generateInputString">Get Combined String</button>
    <p>Result: {{ combinedString }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValues: [
        { id: 1, value: '' },
        { id: 2, value: '' },
        { id: 3, value: '' },
        { id: 4, value: '' },
        { id: 5, value: '' },
        { id: 6, value: '' }
      ],
      combinedString: ''
    };
  },
  methods: {
    generateInputString() {
      // Extract values in order and join into a string
      this.combinedString = this.inputValues
        .map(item => item.value)
        .join(''); // Use ', ' instead of '' if you want separators
    }
  }
};
</script>

How It Works #

• The v-for loops through inputValues and binds each input to the item's value using v-model, so any user input is immediately reflected in the data.
• The generateInputString method uses map() to create an array of just the value properties, maintaining the original order of the inputs.
• join('') converts that array into a single string with no separators (adjust the argument to join if you need spaces, commas, etc.).

If you want the string to update automatically as the user types, replace the method with a computed property instead:

<script>
export default {
  // ... data section remains the same ...
  computed: {
    combinedString() {
      return this.inputValues.map(item => item.value).join('');
    }
  }
};
</script>

Then you can just display {{ combinedString }} in your template, and it will update every time an input changes.

内容的提问来源于stack exchange，提问作者wilcode