Question

我需要使用此输入框值将此html块附加到create vue对象。怎么做？你能解释一下答案吗？与下面的html使用vuejs part追加。如果有人知道如何执行此操作，请回答此问题。我正在尝试一次添加和删除一行，但我不确定两件事。

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="row">
  <div class="col-4">
    <div class="octo-form-group">
      <label for="sel1">Select  Column</label>
      <select v-model="condition_column" class="form-control m-input" id="new_where_column_name">
        <option value=""></option>
      </select>
    </div>
  </div>
  <div class="col-2">
    <div class="octo-form-group">
      <label for="sel1">Aggr Fun</label>
      <select v-model="aggFunc" class="form-control m-input" id="new_logical_conditions">
        <option value="SUM">SUM</option>
        <option value="AVG">AVG</option>
      </select>
    </div>
  </div>
  <div class="col-2">
    <div class="octo-form-group">
      <label for="sel1">Condition</label>
      <select v-model="col_condition" class="form-control m-input" id="new_logical_conditions">
        <option value=""></option>
        <option value="<">&lt;</option>
      </select>
    </div>
  </div>
  <div class="col-4">
    <label for="sel1">Type</label>
    <div class="input-group condition-type-form">
      <input v-model="type" type="text" class="form-control" aria- label="Text input with dropdown button">
      <select>
        <option>Type </option>
      </select>
    </div>
  </div>
</div>
</body>
</html>

我想像这个数组一样输入并用block附加这个值。

array : {
     column:'',
     condition:'',
     aggfun: '',
     type:''
}

Answer 1

你可以试试吗？

http://jsfiddle.net/eywraw8t/514974/

data: {
fields:[
{
key:1,
name:'column',
values:["Hello","There"],
selected:"Hello"
},
{
key:2,
name:'aggFunc',
values:["Hey","You"],
selected:"Hey"
}
]}

在Vue模板中做到了这样

<div class="octo-form-group" v-for="item in fields">
       <label for="sel1">Select  Column</label>
       <select v-model="item.selected" class="form-control m-input" 
              id="new_where_column_name">
            <option :value="option" v-for="(option,idx) in item.values" :selected="idx==0">{{option}}</option>
       </select>                  
    </div>

我在这里所做的是将数据保存在一个对象数组中，其中有选项和选定的值。

如何使用vuejs将其实现为数组？

1 个答案: