Vue JS Теги не будут отображаться в HTML Из JSON

Question

У меня есть JSON, который содержит HTML теги, такие как href, как я могу щелкнуть по нему без обновления страницы? Я уже искал его, но никто не работает ...

Таблица

JSON

I ' м, используя JSON datatable.

Answer 1

мне кажется, что вам нужно использовать аутентичные охранники

см. Здесь https://router.vuejs.org/guide/advanced/navigation-guards.html#global -предохранители

1-я вещь, которую вы должны попробовать, - способны ли вы чтобы регистрировать что-то, когда по вашему маршруту нажимают, используя код здесь

router.beforeEach((to, from, next) => {
  console.log(to);
  console.log(from);
})

, если это успешно для этого конкретного маршрута, попробуйте выполнить следующее:

beforeRouteLeave (to, from, next) {  
  if (to === "edit") {    
    next(false)
  }
}

Answer 2

Если вы не используете полная сборка , вы, к сожалению, не можете добавлять компоненты динамически, как это. Прочитайте Шаблонный компилятор и как использовать его .

Но в большинстве случаев (если вы не выполняете рендеринг на стороне сервера), вам нужно хотите передать атрибуты router-link как объект, что-то вроде:

const jsonData = [
  {
    id: 2,
    title: 'First Vue JS',
    body: 'Vue JS',
    aksi: {
      text: 'Edit',
      attrs: {
        to: {
          name: 'edit',
          params: {
            // Assuming you have the `post` item here (usually while doing `v-for`)
            id: post.id
          }
        },
        class: 'btn btn-primary'
      }
    }
  }
]

и визуализировать их, например:

<table>
  <tr v-for="item in jsonData" :key="item.id">
    <td>{{item.title}}</td>
    <td>{{item.body}}</td>
    <td>
      <router-link v-bind="item.attrs">{{item.aksi.text}}</router-link>
    </td>
  </tr>
</table>

Если вы не зацикливаете их в шаблоне Возможно, вы захотите выяснить, как сделать рендеринг столбца и настроить в нем именно эту ячейку.