javascript - 在服务器表中使用道具

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 Tables 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，因此只能从刀片模板访问该 url 变量

Answer 1

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

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

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