Vuejs связать переменную в JSX с областью действия

Question

Я, по сути, ищу что-то вроде:

<div v-for="k in keys" :key="k">
 {{ k }}
 ...
   <div v-with:myvalue="functionOf(k)">
     {{ myvalue }}
   </div>
</div>

Я не знаю, как бы вы назвали такую ​​вещь, но я могу сказать, что у меня есть подобный код в некоторых местах, и это может быть удобно.

Answer 1

Вы можете использовать свойство computed для создания функций, которые преобразуют значения во что-то еще.

Например, скажем, у вас есть этот код здесь.

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

Вы можете добавить добавить вычисляемое свойство для запуска некоторого кода js и просто вызвать его в html-шаблоне

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p> //computed function
</div>


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

Подробнее об этом можно прочитать в официальной документации

Пример с v-for

<div v-for="k in keys" :key="k">
 {{ k }}
   <div>
     {{ reversedMessage(k) }}
   </div>
</div>


var vm = new Vue({
  el: '#example',
  computed: {
    // a computed getter
    reversedMessage(k){ //you receive the value for each k you have in keys
      return k.split('').reverse().join('')
    }
  }
})