Не могу сгенерировать кнопку роутера на б-таблице - PullRequest
Новая
       38

Не могу сгенерировать кнопку роутера на б-таблице

1 голос
/ 28 мая 2019

На моей странице индекса у меня есть b-table, который загружает некоторые данные.Один из столбцов предназначен для кнопки, которая должна вести на страницу, содержащую дополнительную информацию об объекте, отображаемом в данной строке.Поэтому я подумал, что мне нужно использовать метод v-html следующим образом: 

<template>
  <div>
    <b-table striped outlined hover :items="items" :fields="fields">
        <span slot="info" slot-scope="data" v-html="data.value"></span>
    </b-table>
  </div>
</template>

<script>
  export default {
    name: 'Blocks',
    data() {
      return {
        fields: ['first_name', 'last_name', 'age','info'],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald', info: 
          '<router-link to="/blocks/0"><b-button>Go to first block</b-button></router-link>'},
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw', info: 
          '<router-link to="/blocks/1"><b-button>Go to second block</b-button></router-link>'},
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson', info: 
          '<router-link to="/blocks/2"><b-button>Go to third block</b-button></router-link>'},
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney', info: 
          '<router-link to="/blocks/3"><b-button>Go to fourth block</b-button></router-link>'}
        ]
      }
    }
  }
</script>

(в настоящее время я использую только статические данные только для тестирования и не беспокоюсь об именах переменных)

Дело в том, что b-button не появится.Это работает с обычным button, хотя.Мало того, но худшая часть в том, что router-link ничего не сделает.Итак:

Ожидается: кнопка в каждом ряду, которая приведет меня к информационной странице из определенного ряда.

Получил: толькоярлыки с кнопки, которая не была связана с информационной страницей.

1 Ответ

1 голос
/ 28 мая 2019

Проблема в том, что router-link и b-button являются компонентами Vue, а не элементами HTML, и вы не можете включать шаблоны Vue в директиву v-html, она просто вставляет строку в виде необработанного HTML.

Вам нужно будет сделать что-то вроде: 

<b-table striped outlined hover :items="items" :fields="fields">
    <span slot="info" slot-scope="data">
        <router-link :to="'/blocks/' + data.value.block_id"><b-button>{{ data.value.description }}/b-button></router-link>
    </span>
</b-table>

Вам нужно будет перенастроить переменные в соответствии с этим форматом, но это должно работать для вас.

...