Question

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

当然，我无法以硬编码的方式访问阵列。我必须假设我正在寻找的物体的位置是随机的。

另外，我不能在这里已经存在的一个循环之上添加另一个循环。（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并将其显示在您想要的位置。

＆＃13;

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: {}
});

＆＃13;

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

＆＃13;

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

2 个答案: