将v-for循环用于v-for之外的位置

Question

在sales数组上循环时，我需要捕获哪个salesPerson === "bar"的对象，并在v-for块之外打印它的sellValue。

当然，我不能以硬编码的方式访问数组。我必须假设我正在寻找的对象的位置是随机的。

而且，我不能在这里已经存在的一个循环的基础上添加另一个循环。(v-for显然是一个循环)。

我需要有办法做到这一点。

下面是一个示例组件：

<template>
  <div id="app">
    <!-- i need to print here the sellValue of 'bar' -->
    <p v-for="(sell,index) in sales"
      :key="index">{{sell.sellValue}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      sales: [
        {
          salesPerson: 'foo',
          sellValue: 1
        },
        {
          salesPerson: 'bar',
          sellValue: 2
        }
      ]
    }
  }
}
</script>

Answer 1

你可以尝试使用一个自定义的HTML标记(没有注册为Vue的组件)，它相当“丑陋”，但这是我能想到的唯一解决方案(注意Vue的警告，如果没有禁用)：

<template>
  <div id="app">
    <uglyTag v-for="(sell,index) in sales" :key="index">
      {{sell[ sell.findIndex( e=>e.salesPerson==="bar" ) ].sellValue}}
      <p>{{ sell.sellValue }}</p>
    </uglyTag>
  </div>
</template>

另一种解决方案是重新考虑数据的结构，这样您就可以拥有(但仍然需要uglyTag方法)：

data(){
  return {
    salesTitle: 2,
    sales: [
      {
        salesPerson: 'foo',
        sellValue: 1
      },
      {
        salesPerson: 'bar',
        sellValue: 2
      }
    ]
  }
}

和

<template>
  <div id="app">
    <uglyTag v-for="(sell,index) in sales" :key="index">
      {{ salesTitle }}
      <p>{{ sell.sellValue }}</p>
    </uglyTag>
  </div>
</template>

Answer 2

也许我没有正确理解这个问题，但您仍然处于组件的相同作用域中。为什么不为您感兴趣的值添加一个getter，并将其显示在您想要的位置。

​

Vue.component('my-template', {
  template: '    <div id="app">\
      <!-- i need to print here the sellValue of \'bar\' -->\
			<p>{{ saleValue }}</p>\
      <p v-for="(sell,index) in sales" :key="index">{{sell.sellValue}}</p>\
    </div>',
  data: function() {
    return {
      sales: [{
        salesPerson: 'foo',
        sellValue: 1
      }, {
        salesPerson: 'bar',
        sellValue: 2
      }]
    }
  },
	computed: {
		saleValue: function() {
			return this.sales.filter(function(val) {
				return val.salesPerson === 'bar';
			})[0].sellValue;
		}
	}
});

var vm = new Vue({
	el: '#vm',
	data: {}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="vm">
  <my-template></my-template>
</div>

​