在服务器表中使用prop

Question

大家好，我对vue表2有问题。我向我的应用程序传递一个带有以下内容的Vue组件：

<tenant-applications :url="{{ json_encode($tenant->websites->first()->hostnames()->first()->fqdn) }}/api/applications"></tenant-applications>

它返回“http://anotherdomain.com/api/endpoint"

但是，当我对Vue表2执行以下操作时，此配置会出现以下错误：“属性内部的插值已被删除。请改用v-bind或冒号速记。”

<template>
  <v-server-table url="//{{url}}" :columns="columns" :options="options"></v-server-table>
</template>
<script>
  import {ServerTable, ClientTable, Event} from 'vue-tables-2';

  Vue.use(ClientTable, {}, false, 'bootstrap4');

    export default {
        data: function () {
            return {
                applications: "",
        columns: ['Application', 'Type', 'Lender', 'Options', 'Sale', 'Rate', 'Broker'],
        tableData: applications,
        options: {
            perPage:25,
            perPageValues:[25],
            filterable: false,
        }
      }
      },
        props: {
            url: String,
        },
        created (){

        },
        methods: {
      }
    }
  }
</script>

有没有更好的方法来实现我的需求？我使用的是Laravel，因此只能从blade模板访问该url变量

Answer 1

只需添加computed即可解决此问题并绑定到url：

    // template
    <v-server-table :url="urlForServerTable" :columns="columns" :options="options"></v-server-table>

    // component
    ...
    computed: {
        urlForServerTable() {
            return `//${this.url}`
        }
    }
    ...