使用 javascript 和 vue js 连接表单输入数据

Question

我有一个带有 vuejs 的表单，并希望在提交来自输入字段的数据时进行连接。我附上了一个jsfiddle，在那里我试图解决concat但没有成功。

我为三个输入字段设置了三个 vue vomponents，其中第一个是下拉列表，其中自定义选项应更改为输入文本字段。

如果我试图连接三个数据，js 会给我未定义的错误。

new Vue({
    el: '#product_id',
    data: {
        selected: '1',
        options: [
            { text: 'Product 1', id: '1', value: '1' },
            { text: 'Product 2', id: '2', value: '2' },
            { text: 'Product 3', id: '3', value: '3' },
            { text: 'Product 4', id: '4', value: '4' },
            { text: 'Custom', id: '5', value: '' }
        ],
        product_i: '',
        resetKey: 0,
    },
    methods:{
        updateComponent(){
            this.resetKey += 1;
            console.log(this.resetKey);
            console.log('test');
        }
    },
}),

new Vue({
    el: "#product_name",
    data: {
        product_n: '',
    }
});

new Vue({
    el: "#product_price",
    data: {
        product_p: '',
    }
});


function combine_product_datas() {
    var id = document.getElementById('input1').value;
    var name = document.getElementById('input2').value;
    var price = document.getElementById('input3').value;
        document.getElementById('joint').value = id + '.' + name + '/' + price;
        alert(document.getElementById('joint').value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div class="row">
  <div id="product_id">    
    <div :key="resetKey">
      <small>Product id</small>
      <div v-if="selected != ''">
        <select v-model="selected">
          <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
          </option>
        </select>
      </div>
      <br>                      
      <div v-else>
        <input id="id" v-model="product_i" value="" type="text" placeholder="Add your product">
        <button v-on:click="updateComponent">Reset</button>
      </div>
  </div>
</div>
<br>                      
<div id="product_name">
  <div>
    <div>
        <small>Product name</small><br>
        <input id="name" v-model="product_n" type="text">
    </div>
  </div>
</div>
<br>                      
<div id="product_price">
  <div>
    <div>
      <small>Product price</small><br>
      <input id="price" v-model="product_p" type="text">
    </div>
  </div>
</div>
<br>                       
<div>
  <div>
    <button type="submit" onclick="combine_product_datas();">Combine datas</button>
  </div>
</div>
<br>                      
<input type="hidden" id="joint">
<br>                      
</div>

Answer 1

查看代码，我不太清楚为什么需要三个不同的 Vue 实例。您可以简单地将整个东西放在一个包装器下并使用一个 Vue 实例。然后，您可以将 javascript 函数放在一个实例中，而不必使用文档选择器来获取组合值。修改后的代码是这样的（修改后的js小提琴here）：

new Vue({
        el: '#app',
        data: {
            selected: '1',
            options: [
                { text: 'Product 1', id: '1', value: '1' },
                { text: 'Product 2', id: '2', value: '2' },
                { text: 'Product 3', id: '3', value: '3' },
                { text: 'Product 4', id: '4', value: '4' },
                { text: 'Custom', id: '5', value: '' }
            ],
            product_i: '',
            resetKey: 0,
            product_n: '',
          	product_p: ''
        },
        methods:{
          updateComponent(){
            this.resetKey += 1;
            console.log(this.resetKey);
            console.log('test');
          },
          combineData() {
          	const { product_i, product_n, product_p } = this;
            alert(`id: ${product_i}, name: ${product_n}, price: ${product_p}`)
          }
        },
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <small>Product id</small>
  
  <div v-if="selected != ''">
    <select v-model="selected">
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
  </div> 
  
  <div v-else>
    <input id="id" v-model="product_i" value="" type="text" placeholder="Add your product">
    <button @click="updateComponent">Reset</button>
  </div>
  
  <div>
    <small>Product name</small><br>
    <input id="name" v-model="product_n" type="text">
  </div>

  <div>
    <small>Product price</small><br>
    <input id="price" v-model="product_p" type="text">
  </div>            

 <button type="submit" @click="combineData()">Combine data</button>
  <span :value="combined"></span>
                   
  <input type="hidden" id="joint">

</div>