Vue js - How to store Vue js value to variable in laravel blade template?

Question

Let's start with live example on that I'm working. My project is in laravel 5.3.

I have 2 files. brand_details.blade.php and brand_detail.js file to get all detail for particular brand. I got success to get all detail.

Now brand has many price for ex: brand abc have 3 different prices 100,600,1500 and so on. and I am getting string of price but I want it's as an array so I can use v-for on price and show as a select option manner.

brand_detail.blade.php file

<div id="container_detail">
<brand-detail></brand-detail>
</div>
<template id="brand-detail-template">
   <div class="content">
      <h1> @{{d.brand_name}} </h1>
      <img :src="d.image" class="">

    // here I have print my price and it's in string format 
    @{{ d.price }} // output:  100,600,1500

// if I apply filter for string to array it's give me an array
   @{{ d.price | strtoarr}} // output: [100,600,1500] but how to pass
   this array to select option tag ? 

    //but I want price is an array formate so I tried below trick but didn't work. here I apply **strtoarr** filter on string but it's give me an error that **vue.js:525 [Vue warn]: Property or method "strtoarr" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in component <brand-detail>)**

    <select name="price">
       <option v-for="price in (d.price | strtoarr)" v-text="price"></option>
    <select>
   </div>

</template>

brand_detail.js

Vue.component('brand-detail', {

template: '#brand-detail-template',

data: function(){

    return {

        detail: []

    }

},

created: function(){
    //var slug = this.$route.params.slug;
    var slug = window.location.pathname.split("/").pop();
    var url = window.location.protocol + "//" + window.location.host + "/";

    var api_url = url + 'gift_india/brand_detail/' + slug;
    var that = this
    axios.get(api_url)
        .then(function (response) {
            //console.log(response.data);
            that.detail = response.data;

        })
        .catch(function (error) {
            console.log(error.data);
        });

},

filters: {
    removehtml: function (value) {
        if (!value) return ''
        var myContent = value;
        return myContent.replace(/(<([^>]+)>)/ig,"");
    },
    strtoarr: function (value) {

        var array = JSON.parse("[" + value + "]");
        return array;
    }
}
});

new Vue({

el: '#container_detail'

})

How can I complete this task ?

I thing if I store Vue js value to some variable then I can use that variable in v-for but this is just my thought not sure.

Answer 1

One way of doing it is to use a computed property.

eg. something like this in your component:

computed: {
    prices: function () {
        return this.detail.price.split(',');
    }
}

Then something like this in your template:

<select name="price">
    <option v-for="price in prices" v-text="price"></option>
<select>