Question

我有一个带有vuejs的表单，并希望在提交来自输入字段的数据时进行合并。我在jsfiddle上附加了一个试图解决连续性失败的问题。

在三个输入字段中，我有三个vue vponponent，第一个是下拉列表，自定义选项应更改为输入文本字段。

如果我要合并三个数据，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）：

=IFERROR(REPLACE(F7, FIND("BOB",A2), 13, "Other"),A2)

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}`)
          }
        },
    })

将表单输入数据与javascript和vuejs串联

1 个答案: