Question

我是Vue的新手，但我认为这真的很有用。

这个简化的示例让我遇到了第一个问题

var appvue = new Vue({
  el: '#appvue',
  data: {
    selectedProd: []
  }
});

body {
  background: #20262E;
  
}
.form-row{
	width:24%;
	display:inline-block;
}
#appvue {
  background: #fff;
  padding:10px;
}
#prod_adjust{
  margin-top:20px;
  background: #eee
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div class="prod-wrap" id="appvue">
  <div class="form-row">
    <input v-model="selectedProd" name="product-1260" id="product-1260" type="checkbox" value="1260">
    <label for="product-1260">
      <div class="thumb">
        <img src="https://picsum.photos/100/100">
      </div>
      <div class="details">
        <span class="brand">Brand 1</span>
        <span class="product-title">Product 1</span>
      </div>
    </label>
  </div>
  <div class="form-row">
    <input v-model="selectedProd" name="product-1261" id="product-1261" type="checkbox" value="1261">
    <label for="product-1261">
      <div class="thumb">
        <img src="https://picsum.photos/100/100">
      </div>
      <div class="details">
        <span class="brand">Brand 2</span>
        <span class="product-title">Product 2</span>
      </div>
    </label>
  </div>
  <div class="form-row">
    <input v-model="selectedProd" name="product-1263" id="product-1263" type="checkbox" value="1263">
    <label for="product-1263">
      <div class="thumb">
        <img src="https://picsum.photos/100/100">
      </div>
      <div class="details">
        <span class="brand">Brand 3</span>
        <span class="product-title">Product 3</span>
      </div>
    </label>
  </div>
  <div class="form-row">
    <input v-model="selectedProd" name="product-1264" id="product-1264" type="checkbox" value="1264">
    <label for="product-1264">
      <div class="thumb">
        <img src="https://picsum.photos/100/100">
      </div>
      <div class="details">
        <span class="brand">Brand 4</span>
        <span class="product-title">Product 4</span>
      </div>
    </label>
  </div>

  <div id="prod_adjust">
    <p v-for="product in selectedProd">{{product}}</p>
  </div>



</div>

我有很多产品，例如上面的复选框。我需要将检查项目列表放在另一个地方。

我使用v-model和v-for进行了此操作-但我的主要问题是现在仅从复选框发送值-我还需要img-src，brand ，product-title-所有这些参数，我在输入中还可以具有更多属性。

但是我如何通过Vue将它们传递到数据中：{ selectedProd:[]}？

还是我需要创建一个单独的JS函数，该函数将收集所有这些数据并将其发送到数组selectedProd？

提前谢谢

Answer 1

如果您输入的是JSON，其中包含您要的所有属性（product_ID，img src，品牌名称），则可以将对象分配给v-model而不是product_ID。

您的JSON数组应如下所示，

productsArray: [ { productID: 1260, product-title: "Product 1", brand: "Brand 1", img: "https://picsum.photos/100/100" }, { productID: 1261, product-title: "Product 2", brand: "Brand 2", img: "https://picsum.photos/100/100" },]

然后在https://picsum.photos/100/100内，您可以读取每个对象，选择该对象后，您可以将整个对象分配到https://picsum.photos/100/100

Answer 2

您将要使用产品所需的数据创建一个对象。然后，您可以使用v-for循环浏览并以所需方式显示它们。

在示例中，我包括一个计算函数，该函数自动返回要检查的函数。这是通过v模型将复选框绑定到对象内部的标志来完成的。在此示例中，为简单起见，我将其称为selected。

var appvue = new Vue({
  el: '#appvue',
  data: {
    products: [{
      id: 1260,
      brand: "Brand A",
      product: "Bubblegun",
      image: "https://picsum.photos/100/100",
      selected: false
    }, {
      id: 1261,
      brand: "Brand B",
      product: "Bubblegum",
      image: "https://picsum.photos/100/100",
      selected: false
    }],
  },
  computed: {
    selectedProd() {
      return this.products.map(product => {
        if (product.selected) return product
      })
    }
  }

})

body {
  background: #20262E;
}

.form-row {
  width: 24%;
  display: inline-block;
}

#appvue {
  background: #fff;
  padding: 10px;
}

#prod_adjust {
  margin-top: 20px;
  background: #eee
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>

<div class="prod-wrap" id="appvue">
  <div class="form-row" v-for="product in products">
    <input v-model="product.selected" name="product-1260" id="product-1260" type="checkbox">
    <label for="product-1260">
		  <div class="thumb">
				<img :src="product.image">
			</div>
      <div class="details">
				<span class="brand">{{product.brand}}</span>
				<span class="product-title">{{product.product}}</span>
			</div>
		</label>
  </div>

  <div id="prod_adjust">
    <p v-for="product in selectedProd">{{product}}</p>
  </div>
</div>

Answer 3

我终于用了下一种方式

    vueproducts = function(){
    appvue.selectedProd = [];
    var tempprod = {};
    $('.form-row input').each(function(){
        if ($(this).is(":checked")){
            tempprod.id = $(this).val();
            tempprod.img = $(this).parent().find('img').attr('src');
            tempprod.title = $(this).parent().find('.product-title').html();

            appvue.selectedProd.push(tempprod);
            tempprod = {};
        };
    });
}

我可以将v模型的唯一价值发送给v-for

3 个答案: