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}`
        }
    }
    ...

在服务器表中使用道具

1 个答案: