0

I want to show red on r.data2 by vue.js, but it can not work proper, any hint to debug it?

The data 'rows' is updated by a timer per second. The 'Status', 'data1', 'data2' are generated on server side.

  vm = new Vue({
    el: '#app',
    data: {
       rows: [{Status:1, data1:"d1", data2:"d2"}]
    }
  })
  ...   
  <tr v-for="r in rows">                                                          
    <td><button class="st-{{r.Status}}">r.data1</button></td>
    <td valign="top">                                                             
      <div v-if="r.Status == 4">                                                  
        <font color="red">{{r.data2}}</font>                          
      </div>                                                                      
      <div v-else>                                                                
        {{r.data2}}                                                   
      </div>                                                                      
    </td>                                                                         
  </tr>
Daniel YC Lin
  • 15,050
  • 18
  • 63
  • 96

1 Answers1

2

Did you try class and style bindings as given in Vue docs?

Ref: https://vuejs.org/guide/class-and-style.html#Object-Syntax-1

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

and your data:

data: {
    activeColor: 'red',
    fontSize: 30
}

That example is a copy-paste from the docs link above. Check it out!

Edited answer after comment #1:

The best way is to use array syntax for class bindings, as follows:

<div v-bind:class="['some-static-class-for-your-data', { 'danger-class' : data2 == 4 }]">
    my data2 value = {{data2}}
</div>

And set a CSS like:

.danger-class {
    color: red;
}

Now whenever your data2 has the value of 4, the 'danger-class' will be set on your div. Your CSS ensures that it is displayed in red, or whatever color you choose.

If you have other classes for your data, you can put it as shown in the above example with some-static-class

It is a good practice to set meaningful class names instead of hard-coding styles. So I would not recommend you to go for style bindings, though you can do it if you want. Check out the docs link for class and style bindings.

Mani
  • 23,635
  • 6
  • 67
  • 54
  • In my case, I just want the client side use 'red' color to present the 'data2' when the row of data's Status is 4. – Daniel YC Lin Oct 24 '16 at 05:42
  • I have edited my answer above. Please check if it works. – Mani Oct 24 '16 at 05:56
  • or, I could just create a '.st-a-4' CSS style. And use 'st-a-{{r.Status}}' as class of the data2 item – Daniel YC Lin Oct 24 '16 at 08:45
  • I really don't think Vue allows you to bind classnames like that. You can see if it works. But it is also not my personal preference, as it is difficult to maintain and explain to other team members. – Mani Oct 24 '16 at 08:47