Блог

Я хочу отделить строку, объединенную запятой, и сохранить ее теги span отдельно, чтобы я мог получить единственное значение. Я работаю в Vuejs с Php и получаю данные из базы данных с помощью Axios. У меня есть product_color значение в базе данных, объединенное запятыми, как это Red,Black, White , и я хочу разделить его так же, как explode() функцию PHP. приведенный ниже код Благодарит и извиняется за плохой английский.

 <div class="card p-5" v-for="(single, index) in singleProduct" :key="single.id">
     <h5 class="colors">colors:
      {{ single.product_color }}
      //getting value like this Red,Black,White
      <span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span>
      <span class="color green"></span>
      <span class="color blue"></span>
      </h5>
</div>


import axios from "axios";
export default {
  name: 'product-detail',
  data (){
    return {
       //data from api
       singleProduct: [],
       product_id: this.$route.params.product_id
    }
  },
  created(){
    this.fetchItem();
  },
  methods: {
    /* eslint-disable no-unused-vars */
        fetchItem(product_id) {
            axios
                .get(`http://localhost/vue/src/Api/api?action=fetchItemamp;product_id=${this.product_id}`)
                .then((res) => {
                    console.log(res);
          this.singleProduct = res.data.product_data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
  }
}
  

Вы можете использовать метод js split() для вашей строки, чтобы создать массив, подобный php explode() . Поместите это в вычисляемый метод для создания массива, а затем добавьте цикл v-for для вывода ваших промежутков:

 data() {
    //your data attrs
},
computed: {
    productColors() {
        return this.singleProduct.product_color.split(',');
    }
},
  

а затем в вашем шаблоне:

 <span v-for="productColors as color" :class="'color '.color">{{color}}</span>