javascript - 使用 v-bind 将数据放入属性 href 中的标签 a (VUE.JS 2 + Laravel 5.3)

Question

这是我的 javascript/vue.js 代码:

        import _ from 'lodash'
        export default{
            props:['campanha'],
            data (){
                return{
                    list:[],
                    filter: '',
                    href: '/campanha/9/edit'
                }
            },
            methods:{
                url: function (href){
                    return '/campanha/'+this.href+'/edit'
                }
            },
            mounted: function (){
                this.list = JSON.parse(this.campanha)
            },
            computed: {
                filteredCampanhas(){
                    var self = this
                    return this.list.filter(function(campanhas) {
                        return campanhas.nome.indexOf(self.filter) > -1
                    })
                }
            }
    }

这是我的 html:

<template>
        <div>
            <div class="well">
                <a href="campanha/create" class="btn btn-default" title="Nova Campanha">Novo Cadastro <span class="glyphicon glyphicon-plus" aria-hidden="true"/></a><br></br>
                <input type="text" class="form-control" placeholder="Filtrar Campanhas" v-model="filter">
            </div>
            <div class="table-responsive">
                <table class="table table-borderless">

                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Nome</th>
                            <th>Data Início</th>
                            <th>Data Término</th>
                            <th>Hora Inícío</th>
                            <th>Hora Término</th>
                        </tr>
                    </thead>
                    <tbody>

                        <!--{{ url('/campanha/' . $item->id_campanha . '/edit') }}

                         href: '/campanha/9/edit'
                            <td><a v-bind:href="href">{{ c.nome }}</a></td>
                        !-->

                        <tr v-for="c in filteredCampanhas">
                            <td>{{ c.id_campanha }}</td>
                            <td><a :href="url(c.id_campanha)">{{ c.nome }}</a></td>
                            <td>{{ c.data_inicio }}</td>
                            <td>{{ c.data_termino }}</td>
                            <td>{{ c.hora_inicio }}</td>
                            <td>{{ c.hora_termino }}</td>
                        </tr>

                    </tbody>

                </table>
            </div>
        <div>


</template>

我试图将一些数据放入我的标签 a 的 href 部分，以链接到另一个页面，但它不起作用。

Answer 1

尝试以下操作:

methods:{
    url: function (href){
        return '/campanha/'+ href+'/edit'
    }
},

当你使用 this.href 时，它会开始从 vue 实例的数据中选择 href，