Question

当Vue JS中数组中的数据发生变化时，我一直在尝试使用一些图标（fontawesome）进行更新。

这是我的模板

<div v-for="task in sortedTasks" class="box" >
        <span v-if="task.starred === 1">Starred</span>
        <span v-else >Not Starred</span>
        <label class="b-checkbox is-primary">
            <input id="task.id" name="select" :value="task.id" class="styled" type="checkbox">
            <label :for="task.id"></label>
        </label>
        <div class="spacer-left" style="display: inline-block;">{{task.title}}</div>
        <div class="is-pulled-right" style="display: inline-block;">
            <a v-if="task.starred === 1" @click="setStar(task)"><i class="far fa-star-exclamation fa-lg has-text-primary"></i></a>
            <a v-else @click="setStar(task)"><i class="far fa-star fa-lg has-text-primary"></i></a>
        </div>
        <div class="is-pulled-right" style="display: inline-block;">
            <span v-if="checkDueDate(task.due_date)" class="has-text-primary is-size-7 spacer-right">{{formatDueDate(task.due_date)}}</span>
            <span v-else class="has-text-danger is-size-7 spacer-right">{{formatDueDate(task.due_date)}}</span>
        </div>
        <div class="is-pulled-right" style="display: inline-block;"><span class="is-size-7 spacer-right">{{task.assigned_to.name}}</span></div>
    </div>

这是单击星号

时调用的setStar（）方法

setStar: function (task) {
    // find task in array and change to starred
   let ref = _.findIndex(this.tasks, {'id': task.id});
   console.log(ref);
    let star = this.tasks[ref].starred ?  0 : 1;
    this.$nextTick(function() {
      this.tasks[ref].starred = star;
    });


    // send api request to update database
    axios.post('api/tasks/star/toggle', {
      id: task.id,
      star: star
    }).then(r => {
      // do stuff here
    })


  },

切换工作正常，因为我有一个标签，我添加了检查，但是当点击星形时这会改变。图标保持不变。

有什么想法吗？

Answer 1

不知道为什么，但是一旦我切换到webfont css而不是svg，它就能完美运行。

Fontawesome图标不会更新

1 个答案: