1

Мне нужно вывести в цикле шаблона данные обработанные функцией multiply(), а чтобы не выводить их через {{multiply(n)}}, что будет вызывать функцию несколько раз с одними и теми же данными, хочу определить переменную n2, в которой будут лежать обработанные данные.

Как это можно сделать?

Наваял пример (неработающий):

var app = new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3, 4, 5]
  },
  template: `
	<div>
		<div v-for="n in arr">
			<div :n2="multiply(n)">
				<span>*{{n2}}*{{n2}}*{{n2}}*</span>
			</div>
		</div>
	</div>
	`,
  methods: {
    multiply: function(x) {
      return x * 2;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

<div id="app"></div>

Пример на codepen

2 ответа 2

1

Ваш вариант v-bind (:n2="multiply(n)") скорей подходит для передачи переменной в компонент (если точнее, то компонент будет следить за изменением n2)

Например, создадим компонент multiply:

Vue.component('multiply', {
  template: `
    	<div>
            <div>
                <span>*{{n2}}*{{n2}}*{{n2}}*</span>
            </div>
        </div>
    `,
  props: ['n2']
});


var app = new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3, 4, 5]
  },
  template: `
	<div>
  	   <multiply v-for="n in arr" :n2="multiply(n)"></multiply>
	</div>
	`,
  methods: {
    multiply: function(x) {
      return x * 2;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

<div id="app"></div>

Также, как вариант, формировать содержимое span непосредственно методом multiply. А уже в span помещать результат с помощью директивы v-text

var app = new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3, 4, 5]
  },
  template: `
	<div>
		<div v-for="(n, index) in arr">
			<div>
				<span v-text="multiply(arr[index])"></span>
			</div>
		</div>
	</div>
	`,
  methods: {
    multiply: function(x) {
      return `*${(x * 2)}*${(x * 2)}*${(x * 2)}*`;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

<div id="app"></div>

0

 Вместо:

<div v-for="(n, index) in arr">
    <div>
        <span v-text="multiply(arr[index])"></span>
    </div>
</div>

Лучше:

<div v-for="n in arr">
    <div>
        <span v-text="multiply(n)"></span>
    </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.