Vue JS использовать V-On в методе смотреть - PullRequest
Новая
       7

Vue JS использовать V-On в методе смотреть

0 голосов
/ 29 мая 2018

У меня есть компонент, у которого есть свойство данных, называемое строками, которые используются для заполнения динамической таблицы (я использую Datatables).У меня есть вычисленное свойство под названием clientLeads, которое загружает данные хранилища.У меня есть функция наблюдения, которая следит за вычисленным свойством clientLeads и обновляет свойство данных rows.

Я хотел бы использовать компонент router-link для создания ссылки Vue JS Router на страницу профиля.

Вот компонент Datatables (src: https://codepen.io/stwilson/pen/oBRePd):

<script>
import 'datatables.net-bs4'
import jQuery from 'jquery'

export default {
  template: '<table class="table table-striped dt-responsive nowrap" style="width:100%"></table>',
  props: {
    headers: {
      default () {
        return {}
      }
    },
    rows: {
      default () {
        return []
      }
    }
  },
  data () {
    return {
      dTHandle: null
    }
  },
  watch: {
    rows (val, oldVal) {
      let vm = this
      vm.dtHandle.clear()
      vm.dtHandle.rows.add(vm.rows)
      vm.dtHandle.draw()
    }
  },
  mounted () {
    let vm = this
    vm.dtHandle = jQuery(this.$el).DataTable({
      classes: {
        sWrapper: 'dataTables_wrapper dt-bootstrap4'
      },
      columns: vm.headers,
      data: vm.rows,
      searching: false,
      paging: false,
      info: true,
      responsive: {
        details: {
          type: 'column'
        }
      }
    })
  }
}
</script>

А вот мой компонент вида: 

<template> 
    <div>
        <data-tables :headers="headers" :rows="rows" />
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    data () {
        return {
            headers: [
                { title: 'Name' },
                { title: '&nbsp;' }
            ],
            rows: []
        }
    },
    computed: mapGetters({
        clientLeads: 'clientLeads'
    }),
    watch: {
        clientLeads (val, oldVal) {
            let vm = this
            let rows = []
            val.forEach(function (item) {
                let row = []
                row.push(item.name)
                row.push('<router-link to="/lead_details/' + item.id + '"><a><i class="fa fa-eye"></i></a></router-link>')
                rows.push(row)
            })
            vm.rows = rows
        }
    },
    created () {
        // get leads
        this.$store.dispatch('getClientLeads', {
            status: this.status
        })
    }
}
</script>

Тем не менее, полученный html: 

<router-link to="/lead_details/123"><a><i class="fa fa-eye"></i></a></router-link>

... вместо: 

<a href="/lead_details/123"><i class="fa fa-eye"></i></a>

Я понимаю, почему, но не могу найти обходной путь для решения моей проблемы.

1 Ответ

0 голосов
/ 30 мая 2018

Проблема в том, что datatables манипулирует DOM вне Vue.js.Поскольку Vue не обрабатывает элементы, созданные библиотекой lib, компонент ссылки на маршрутизатор не «интерпретируется».

Если вы хотите продолжить работу с этой библиотекой datables, возможно, вы можете попробовать добавить стандартную <a>тег с префиксом # href: 

<a href="#/lead_details/123"><i class="fa fa-eye"></i></a>

Так как vue-router похоже на префикс url с #, когда вы находитесь в режиме по умолчанию (hash-mode): https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations. Или вы можете простоизмените режим на history: 

const router = new VueRouter({
   mode: 'history',
   routes: [...]
 })

и избавьтесь от #.Конечно, это предполагает, что у вас есть соответствующий маршрут, объявленный ранее.Это немного подстроено, так как вы обойдете vue-router таким образом и перезагрузите страницу, но это работает.

Работая с vue, я настоятельно рекомендую, насколько это возможно, отдавать предпочтение библиотекам, которые не манипулируют непосредственно с DOM, и разрешить эту задачу Vue.Vue компоненты дают больше возможностей для настройки.Есть много библиотек компонентов, которые, кажется, делают эту работу, например: https://vuetifyjs.com/en/components/data-tables или http://element.eleme.io/#/en-US/component/table

...