Using prop in server table

Question

Hi All I'm having an issue with vue tables 2. I pass my application a Vue component with the following:

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

Which returns "http://anotherdomain.com/api/endpoint"

But when I do the following for Vue Tables 2 I get the following error with this config: "Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead."

<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>

Is there a better way to achieve what I need? I am using Laravel so can only access that url variable from the blade template

score 0 · Answer 1 · answered Jul 23 '18 at 09:23

Just add computed to solve this and bind to url:

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

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

Using prop in server table

1 Answers1