Блог

Я хочу знать, возможно ли отправить текущие данные в цикле v-for (в шаблоне), например, функции в методах.

 <li v-for="annonce in annonces">

    <article>
    //Here for example I want to send annonce.categorie to the methods 
    //object of the component to change the color in function of the 
    //anonce.categorie string
        <a v-bind:style="['color' : {{getColorCat(annonce)}}]"> 
        {{annonce.categorie}}
        </a> 
    </article>

</li>
  

Редактировать
Просто добавьте функцию с параметром для отправки в v-bind:style и создайте метод, который возвращает цвет строки в функции текущего элемента в цикле.

 <a v-bind:style="getStyle(annonce)">{{annonce.categorie}}</a>


  methods:{

    getStyle(annonce) {
    return { color: this.getColorCat(annonce) };
    },

    getColorCat(annonce) {

      switch(annonce.categorie)
      {
        case this.categories[0] :
        return 'limegreen'
        break;

        case this.categories[1] :
        return 'grey'
        break;

        case this.categories[2] :
        return 'deepskyblue'
        break;

        case this.categories[3] :
        return '#E3E01F'
        break;

        case this.categories[4] :
        return 'silver'
        break;

        case this.categories[5] :
        return 'pink'
        break;

        case this.categories[6] :
        return 'red'
        break;

        case this.categories[7] :
        return 'green'
        break;

        case this.categories[8] :
        return 'purple'
        break;

        case this.categories[9] :
        return 'magenta'
        break;
        default :
      }
    }
  },
  

Да, вы можете сделать это простым способом

 <ul>
    <li v-for="(item, index) in items">
        {{getText(index)}}
    </li>
</ul>
  

и в методах

 methods: {
    getText(index) {
        return someFunctionOf(index);
    }
}
  

Обновлено для добавления:

Вы также можете использовать методы для установки значений атрибутов, но синтаксис в вашем примере неправильный. Есть несколько способов исправить это, но один из подходов:

 <a v-bind:style="getStyles(annonce)">
  

а затем вернуть объект с соответствующими стилями

 methods: {
    getStyles(annonce) {
        return { color: getColorCat(annonce) };
    }
}