Как добавить несколько строк в vuejs - PullRequest
Новая
       3

Как добавить несколько строк в vuejs

3 голосов
/ 20 января 2020

Мое требование - сделать вложенные данные в моей форме, и у каждого из этих данных есть возможность добавлять дополнительные строки или удалять их. Я уже делал это с JavaScript раньше, но с VueJs это моя первая попытка, поэтому мне нужно что-то вроде pu sh:)

Logi c

one

  1. Родительские данные имеют опцию выбора, которая позволяет пользователю выбирать, какой тип ввода ему нужен, и на основе этого выбора он добавляет вход. (КРАСНЫЙ)
  2. Мои родительские данные могут быть добавлены или удалены, поэтому у меня может быть несколько родительских и у каждого из них несколько дочерних одновременно (СИНИЙ)
  3. Мои дочерние данные могут быть добавлены или удалены (ЗЕЛЕНЫЙ)

Код

Вот мои первые данные c html (сценарий для него еще не написан)

Ps: все части прокомментированы. 

<el-form-item label="Variation Name">
    <el-col :span="12">

        // parent
        <el-input placeholder="Please input your variation name" v-model="form.variationParent" class="input-with-select">
            // select type of child's input
            <el-select v-model="form.variationParent" slot="prepend" placeholder="Select">
                <el-option label="Text" value="1"></el-option>
                <el-option label="Text Area" value="2"></el-option>
                <el-option label="Boolean" value="3"></el-option>
            </el-select>
            <el-button slot="append" type="success" icon="el-icon-plus"></el-button> //add parent
            <el-button slot="append" type="danger" icon="el-icon-delete"></el-button> // delete parent
        </el-input>

    </el-col>

    <el-col class="line text-center" :span="3">Variation Value(s)</el-col>
    <el-col :span="9">

        // child's
        <el-input v-model="form.variationChilds" placeholder="Please input your variation value" class="input-with-select">
            <el-button slot="append" type="success" icon="el-icon-plus"></el-button> //add child
            <el-button slot="append" type="danger" icon="el-icon-delete"></el-button> // delete child
        </el-input>

    </el-col>
</el-form-item>

Любые виды idea и sample codes приветствуются.

Обновление

I удалось добавить и удалить родительскую часть с этим кодом: 

<el-form-item v-for="(index, k) in variationParents" :key="k" label="Variation Name">
    <el-col :span="12">

        <!-- parent -->
        <el-input placeholder="Please input your variation name" v-model="form.variationParent" class="input-with-select">
            <el-select v-model="form.variationParent" slot="prepend" placeholder="Select">
                <el-option label="Text" value="input"></el-option>
                <el-option label="Text Area" value="textarea"></el-option>
                <el-option label="Boolean" value="boolean"></el-option>
            </el-select>
            <el-button slot="append" @click="add(k)" type="success" icon="el-icon-plus"></el-button>
            <el-button slot="append" @click="remove(k)" v-show="k || ( !k == variationParents.lenghth > 1)" type="danger" icon="el-icon-delete"></el-button>
        </el-input>

    </el-col>

    <el-col class="line text-center" :span="3">Variation Value(s)</el-col>
    <el-col :span="9">

        <!-- child's -->
        <el-input v-model="form.variationChilds" placeholder="Please input your variation value" class="input-with-select">
            <el-button slot="append" type="success" icon="el-icon-plus"></el-button>
            <el-button slot="append" type="danger" icon="el-icon-delete"></el-button>
        </el-input>

    </el-col>
</el-form-item>

data() {
    return {
        variationParents: [
            {
                name: '',
                type: ''
            }
        ],
    }
},
methods: {
    add(index){
        this.variationParents.push({name: '', type: ''});
    },
    remove(index){
        this.variationParents.splice(index, 1);
    },
}

и вот результат + проблема

three

As Вы видите, что у меня есть новые строки родителей и работают кнопки add / remove, но все мои входные данные получают одинаковое значение, то есть, если я установлю первый ввод для чего-то, все они получат одинаковое значение.

Они нужны каждому имеют другое значение и отправляются на сервер в виде массива.

1 Ответ

1 голос
/ 20 января 2020

Я не смог запустить ваш jsfiddle, но, глядя на ваш код, я думаю, что вы довольно близки, только, как я уже говорил в комментарии, вам нужно привязать эти элементы ввода / формы к отдельному variationParents существу зацикливается на v-for.

Вот небольшой пример, показывающий, как синхронизировать c родительские значения между компонентами. Я не могу добавить все для вас, хотя.

Кроме того, при масштабировании вы можете рассмотреть возможность использования Vuex для лучшего управления состояниями. 

const variationNames = ['Text', 'Text Area', 'Boolean'];

const VariationBar = Vue.extend({
  template: '#variation-bar',
  props: {
    name: {
      type: String,
      // This simply ensures that the `name` property 
      // be validated against the list, while binding;
      // https://vuejs.org/v2/guide/components-props.html#Prop-Validation
      validator: val => variationNames.includes(val)
    },
    values: {
      type: Array
    }
  },

  data: () => ({
    variationNames
  }),

  computed: {
    // Read more here on how computed setter works:
    // https://vuejs.org/v2/guide/computed.html#Computed-Setter
    inputName: {
      get() {
        return this.name;
      },
      set(val) {
        // When setter gets invoked, emit the new value
        // and notify the parent that it needs to "sync" it.
        // This works hand-in-hand with the `.sync` modifier
        // https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
        this.$emit('update:name', val);
      }
    }
  },
  
  methods: {
    addValue() {
      // Add your default item/preset here
      this.values.push({
        text: ''
      })
    },
    removeValue(index) {
      this.values.splice(index, 1);
    }
  }
})

new Vue({
  el: '#app',

  data: vm => ({
    variations: [{
      name: 'Boolean',
      values: [
        { text: 'Core i3' },
        { text: 'Core i5' }
      ]
    }]
  }),

  methods: {
    addVariation() {
      this.variations.push({
        name: 'Text',
        values: [
          { text: 'Core i3' }
        ]
      });
    },
  },

  components: {
    VariationBar
  }
})
.variation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}



  
  
  
  {{variations}}
добавить удалить добавить удалить
...