Question

首先，请检查我发现的这支笔，其概念类似于我的问题ReactJS - Baby Name Inspiration。我希望通过Vue.js做到这一点，但抱歉，我不知道React。

我想问的问题是用户是否单击数组1中的列表项，我将数组1命名为animals，结构将显示如下。然后，它将单击的项目作为wished_pets_list传递给数组2，数组2。例如，如果从{displayName: "Kitty", value: "cat"}列表中单击animals，则animals和wished_pets_list也存储了该对象。当同一对象位于两个数组中时，animals元素的呈现器将用HTML隐藏该对象的输出；它还呈现为wished_pets_list作为按钮。如果单击wished_pets_list的项目按钮，它将从wished_pets_list中删除对象数据，并且可以重新访问animals 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);
    }
},

谢谢，如果可以的话，请制作类似的codepen或jsfiddle。

Answer 1

以下是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>

javascript部分：

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

Answer 2

根据@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>

js：

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

从数组1到检查项目，并将检查项目传递到数组2，然后从数组2呈现的列表中隐藏检查项目

2 个答案: