代码之家 › 专栏 › 技术社区 › Samson

选中项形成数组1,并将选中项传递到数组2,然后从数组2呈现的列表中隐藏选中项

vuejs2 vue.js

Samson · 技术社区 · 6 年前

ReactJS - Baby Name Inspiration . 我希望通过Vue.js来实现,但很抱歉我不知道该怎么做。

我想问的问题是,如果用户单击数组1中的列表项,我将数组1命名为 animals ,结构如下所示。然后,它将单击的项作为 wished_pets_list {displayName: "Kitty", value: "cat"} 点击自列表, 动物 希望宠物清单 动物 元素将在HTML中隐藏对象的输出;它还呈现给作为按钮。如果单击 希望宠物清单 希望宠物清单 HTML列表。它可以再次循环。

data: () => ({
    animals: [
        {displayName: "Kitty", value: "cat"},
        {displayName: "Puppy", value: "dog"},
        {displayName: "Chick", value: "bird"},
        {displayName: "Fawn", value: "Deer"},
        {displayName: "Joey", value: "Kangaroo"},
        {displayName: "Piglet", value: "pig"},
        {displayName: "Fry", value: "fish"},
        {displayName: "Polliwog", value: "frog"}
    ],
    wished_pets_list: [],
    wished_pets_list_formatted: []
}),

我试着把它做成HTML:

<div v-for="item in wished_pets_list">
    <span @click="removeSelected(item.value)">{{item.displayName}}</span>
</div>

<div class="dropdown-list-container">
    <div class="dropdown-list" v-for="(item, index) in animals">
        <label :for="'givenID' + item.index" @click="pushSelect(item.value)">{{index}}{{item.displayName}}</label>
        <input type="checkbox" v-model="wished_pets_list" :value="{'displayName': item.displayName, 'value': item.value}" :id="givenID' + item.index">
    </div>
</div>

<!-- a hidden text field to submit the formatted as value only -->
<input type="text" v-model="wished_pets_list_formatted" name="anyName" v-show>

我认为应该使用两种方法:

methods: {
    removeSelected(value){
        this.wished_pets_list_formatted.push(value);
    },
    pushSelect(value){
        this.wished_pets_list_formatted.splice(value);
    }
},

谢谢,如果可以的话,请制作一个类似的代码笔或jsfiddle。

2 回复 | 直到 6 年前

Allkin 6 年前

下面是 Vue中示例代码笔的实现 (不包括搜索部分,因为我认为这与本案无关)。

模板:

<div id="app">
  <div data-reactroot="">
   <main>
      <div class="favourites">
         <h4>Your Shortlist</h4>
         <ul>
           <li class="girl" v-for="(animal, index) in wished_pets_list" @click="removeFromList(index)">{{animal.displayName}}</li>
         </ul>
         <hr>
      </div>
      <ul>
         <li v-for="(animal, index) in animals" :key="animal.value" class="boy" @click="addToList(index)">{{animal.displayName}}</li>

      </ul>
   </main>
</div>
</div>

var vm = new Vue({
    el: "#app",
  data () {
    return {
      animals: [
        {displayName: "Kitty", value: "cat"},
        {displayName: "Puppy", value: "dog"},
        {displayName: "Chick", value: "bird"},
        {displayName: "Fawn", value: "Deer"},
        {displayName: "Joey", value: "Kangaroo"},
        {displayName: "Piglet", value: "pig"},
        {displayName: "Fry", value: "fish"},
        {displayName: "Polliwog", value: "frog"}
    ],
    wished_pets_list: [],
    wished_pets_list_formatted: []
    }
  },
  methods: {
    addToList(index) {
      this.wished_pets_list.push(this.animals[index])
      this.animals.splice(index, 1)
    },
    removeFromList(index) {
      this.animals.push(this.wished_pets_list[index])
      this.wished_pets_list.splice(index, 1)
    }
  }
});

对于CSS,可以使用codepen示例中的一个。 Codepen fork

Samson 6 年前

基于@Allkin的答案,以及我的附加要求,我试图用一个有序的列表做出类似Allkin的答案。

模板:

<div id="app">
  <div>
    <div class="favourites">
      <h4>Your Shortlist</h4>
      <ul>
        <li class="girl" v-for="(animal, index) in wished_pets_list" @click="removeFromList(index, animal.value, animal.id)">{{animal.displayName}}</li>
      </ul>
      <hr>
    </div>
    <ul>
      <li v-for="(animal, index) in animals" :key="animal.value" class="boy" @click="addToList(index, animal.value, animal.id)" v-show="!animal.checked">{{animal.displayName}}</li>

    </ul>
    <span>wished_pets_list_formatted:</span>
    <div>{{wished_pets_list_formatted}}</div><br><br>
    <span>animals:</span>
    <div>{{animals}}</div>
  </div>
</div>

var vm = new Vue({
  el: "#app",
  data() {
    return {
      org_animal_list: [
        { displayName: "Kitty", value: "cat" },
        { displayName: "Puppy", value: "dog" },
        { displayName: "Chick", value: "bird" },
        { displayName: "Fawn", value: "Deer" },
        { displayName: "Joey", value: "Kangaroo" },
        { displayName: "Piglet", value: "pig" },
        { displayName: "Fry", value: "fish" },
        { displayName: "Polliwog", value: "frog" }
      ],
      animals: null,
      wished_pets_list: [],
      wished_pets_list_formatted: []
    };
  },
  methods: {
    addToList(index, value, id) {
      console.log("added: " + value);
      this.wished_pets_list.push(this.animals[index]);
      this.wished_pets_list_formatted.push(value);
      this.animals[index].checked = !this.animals[index].checked;
    },
    removeFromList(index, value, id) {
      var self = this;
      this.wished_pets_list.splice(index, 1);
      this.wished_pets_list_formatted.forEach(function(item, index) {
        if (item == value) {
          self.wished_pets_list_formatted.splice(index, 1);
        }
      });
      for (var i = 0; i < this.animals.length; i++) {
        if (self.animals[i].id == id) {
          self.animals[i].checked = !self.animals[i].checked;
        }
      }
    }
  },
  beforeMount: function() {
    this.animals = this.org_animal_list;
    for (var i = 0; i < this.animals.length; i++) {
      this.$set(this.animals[i], "checked", false);
      this.$set(this.animals[i], "id", i);
    }
  }
});

我先添加了一个原始列表,然后它将在Vue装载之前进行克隆。此操作允许开发人员将原始数据用于其他用途。

对于完整的示例,请检查 codepen