最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - VueJs: Working with v-class - Stack Overflow

programmeradmin2浏览0评论

I am trying to assign a css class to a span element, whenver it push the EDIT button.

This is my working example in jsfiddle:

/

BUT it only works, because I check if the title property of the edited object is equal to the title property of the todo object, instead I'd rather check if the two objects are equal.

Unfortunately this breaks my code, whenever I have the same property (e.g. titles) but different objects.

<td> 
    <span v-class="
        pleted: todopleted, 
        editing: editedTodo.title == todo.title">
        {{ todo.title }}
    </span>
</td>

Instead I would like to do something like this, where I check todo == editedTodo

<span v-class="
    pleted: todopleted, 
    editing: editedTodo == todo">
    {{ todo.title }}
</span>

Non Working Jsfiddle: /

How do I check if todo is equal with editedTodo. AND is there a better way, to use the v-class directive, instead of using inline expressions, meaning for more plicated calculations?

It seems to work fine in the todomvc example here:

Line 23: .html

I am trying to assign a css class to a span element, whenver it push the EDIT button.

This is my working example in jsfiddle:

http://jsfiddle/r3nepL7u/

BUT it only works, because I check if the title property of the edited object is equal to the title property of the todo object, instead I'd rather check if the two objects are equal.

Unfortunately this breaks my code, whenever I have the same property (e.g. titles) but different objects.

<td> 
    <span v-class="
        pleted: todo.pleted, 
        editing: editedTodo.title == todo.title">
        {{ todo.title }}
    </span>
</td>

Instead I would like to do something like this, where I check todo == editedTodo

<span v-class="
    pleted: todo.pleted, 
    editing: editedTodo == todo">
    {{ todo.title }}
</span>

Non Working Jsfiddle: http://jsfiddle/r3nepL7u/1/

How do I check if todo is equal with editedTodo. AND is there a better way, to use the v-class directive, instead of using inline expressions, meaning for more plicated calculations?

It seems to work fine in the todomvc example here:

Line 23: https://github./yyx990803/vue/blob/dev/examples/todomvc/index.html

Share Improve this question edited Aug 18, 2015 at 21:15 LoveAndHappiness asked Aug 18, 2015 at 19:26 LoveAndHappinessLoveAndHappiness 10.1k22 gold badges74 silver badges107 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

Conditional class names in Vue.js

Here is how you can do it based on the documentation

1st way

as boolean variable

You define a boolean variable in your js file and based on that it will set the class

js file

data: {
  isActive: true,
  hasError: false
}

html file

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

as object

you can also define an object with class names js file

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

html file

<div v-bind:class="classObject"></div>

2nd way

You define the "name of the class" variable in your js file and based on the nameOfTheClass it will set the class

js file

data: {
  nameOfTheClass: 'this-is-the-name-of-the-class'
}

html file

<div v-bind:class="nameOfTheClass"></div>

3rd way

You can set the name of the class in js and then evaluate with if statement in html file

js file data: { nameOfTheClass: 'this-is-the-name-of-class' }

html file

<div v-bind:class="{ active: nameOfTheClass === 'this-is-the-name-of-class'}">

Add a method to your View Model that does a deep parison. For instance, create a method called todoIsEqual and then have it use LoDash to do the parison:

[...]
methods: {
    todoIsEqual: function (todo_a, todo_b) {
        return _.isEqual(todo_a, todo_b);
    }
[...]

and use it like this:

<span v-class="
    pleted: todo.pleted, 
    editing: todoIsEqual(editedTodo, todo)">
    {{ todo.title }}
</span>

Actually the reason it didn't work was pretty simple:

I falsely assinged just two properties and made an if statement to to see if the two objects are equal. I did this:

editTask: function (that) {
    this.editedTodo = {
        body: that.todo.body,
        pleted: that.todo.pleted
    };
},

Instead of asigning the actual object to the editedTodo, like this:

editTask: function (that) {
    this.editedTodo = that.todo;
},

Problem solved.

发布评论

评论列表(0)

  1. 暂无评论