Блог

Главная - Вопросы по программированию - условно оберните данные в ссылку с vue

условно оберните данные в ссылку с vue

#javascript #html #vue.js

Вопрос:

Я пытаюсь просмотреть определенный td элемент ячейки таблицы и задать условие, чтобы, если условие выполнено, я показывал данные в ссылке, а если нет, я просто показывал данные в виде текста

Я, кажется, не могу понять, как это сделать. В настоящее время у меня есть указатель мыши, который установлен на эту ссылку, и я установил условие в своем теге привязки, но он вообще не работает.

У меня есть фрагмент ниже, но в основном я ожидаю увидеть 0 напечатанным в виде ссылки, которая запускает функцию наведения/всплывающего окна. Если тест установлен на 1, я бы ожидал, что просто увижу напечатанный 1

Где я здесь ошибаюсь?

 <script>
new Vue({
  el: "#app",
  props: { 
    text: {
      type: String,
      required: true
    }
  },
  data: {
    timeout: null,
    showCard: false,
    isLoaded: false,
    selected: '',
    test: 0
  },
  methods: {

    mouseover: function (event) {
      console.log(event.pageX, event.pageY)
      clearTimeout(this.timeout)
      var self = this
      this.timeout = setTimeout(function () {
         self.showCard = true
         setTimeout(function () {
           self.isLoaded=true;
         }, 500)
      }, 500)
    },
    mouseleave: function () {
      var self = this
      this.timeout = setTimeout(function () {
        self.showCard = false
        self.isLoaded = false
      }, 200)
    },
    cardOver: function () {
      console.log('card over')
      clearTimeout(this.timeout);
      this.showCard = true
    },
    cardLeave: function () {
      var self = this
      this.timeout = setTimeout(function () {
        self.showCard = false
        self.isLoaded = false
      }, 200)
    }
  }
});
</script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<table id="app">
<tbody>
<td>
  <a v-if="test == 0" href="javascript:void(0)" 
         @mouseover="mouseover"
         @mouseleave="mouseleave">@{{test}}
            </a>
           <div id="hovercard" v-show="showCard" @mouseover="cardOver" @mouseleave="cardLeave">
      <div :class="['bg', {'loaded': isLoaded}]"></div>
      <div class="content">
        <p>Orders ready</p>
      </div>
    </div>
</td>
</tbody>
</table>

Комментарии:

1. var self = this фу

Ответ №1:

Вы подумали

 <a v-if="test == 0"
  href="javascript:void(0)" 
  @mouseover="mouseover"
  @mouseleave="mouseleave">{{test}}
</a>
<span v-else>{{test}}</span>

Документы: Условный рендеринг

Ответ №2:

Оберните свой якорь внутри встроенного component тега условно. ниже приведен пример фрагмента.

 <td>
  <component :is="test == 0 ? 'a' : 'span'" @mouseover="mouseover" @mouseleave="mouseleave" :href="'javascript:void(0)' || ''" target="_blank">{{ test }}</component>
</td>
Метки: