Как реализовать это как массив, используя vuejs? - PullRequest
Новая
       3

Как реализовать это как массив, используя vuejs?

0 голосов
/ 21 декабря 2018

Мне нужно добавить этот HTML-блок с помощью создания объекта 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>

Я хочу, чтобы этот массив вводил и добавлял эти значения с помощью блока. 

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

1 Ответ

0 голосов
/ 21 декабря 2018

Можете ли вы попробовать это?

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 Template сделал это так 

<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>

То, что я делаю здесь,Я храню данные в массиве объектов, в которых у вас есть параметры и выбранные значения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...