vue で v-bind ってのを知った今日。

前提

LaravelとVueは相性がいい。

ほう。使ってみるか。

私のレベル

Laravel -> 人に教えてる Vue -> 説明はできても、コーディングは未経験

vue

 
const app = new Vue({
    el: '#app',
    data: {
        types: []
    },
    methods: {
        fetchTypes: function(){
            axios.get('/api/uses' ).then((res)=>{
                this.types = res.data
            });
        }
    },
    created(){
    }
});

ってすると、例えば user.id だとか user.nameだとか、以下のように取得できる。

                <!--Card content-->
                <div class="card-body">
                    <div class="custom-control custom-radio" v-for="user in users" v-bind:key="user.id">
                      ぼく、@{{user.name}}だよ
                    </div>
                </div>

ただ、例えば

<div id="userid_@{{user.id}}">

...

</div>

とはできないんだよね。やりたいことはおそらくわかると思いますが。こんな時には v-bind:idを使うとよい。

この場合 idでなくてもclassやforもOK。

<div v-bind:id="'userid_' +user.id">

...

</div>

が正解。

違和感。