title: Computed property or other way to change style depending on value inside v-for in Vue
body: <p>I have component like this:</p>
  <pre><code>Vue.component('mcp-item', {
      template: '#mcp-item-template',
      data() {
          return {
              name: &quot;MCP v2&quot;,
              version: &quot;2.0&quot;,
              imei: 'XXXXXX XX XXXXXX X',
              relays: [
                  { name : &quot;REL1&quot;, state : 0 },
                  { name : &quot;REL2&quot;, state : 0 }
              ],
              inputs: [
                  { name: &quot;BP1&quot;, state: 0, color: &quot;#CC0000&quot; },
                  { name: &quot;BP2&quot;, state: 0, color: &quot;#CC0000&quot;  },
                  { name: &quot;BP3&quot;, state: 1, color: &quot;#00CC00&quot;  },
                  { name: &quot;BP4&quot;, state: 0, color: &quot;#CC0000&quot;  },
                  { name: &quot;BP5&quot;, state: 0, color: &quot;#CC0000&quot;  },
                  { name: &quot;BP6&quot;, state: 0, color: &quot;#CC0000&quot;  }
              ],
          }
      },
      methods: {
          reboot: function (event) { alert( this.imei) }
      }
  })
  </code></pre>
  <p>And somewhere in compoment template:</p>
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Input&lt;/th&gt;
              &lt;th&gt;State&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody v-for=&quot;input in inputs&quot; :key=&quot;input.name&quot;&gt;
          &lt;tr&gt;
              &lt;td :style=&quot;{ 'color': input.color}&quot;&gt;{{input.name}}&lt;/td&gt;
              &lt;td&gt;{{input.state}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>As you can see, now I have dedicated <code>color</code> field in my object (which is element of <code>inputs</code> array in <code>data</code>):</p>
  <p>JS:</p>
  <pre><code>{ name: &quot;BP1&quot;, state: 0, color: &quot;#CC0000&quot; }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;td :style=&quot;{ 'color': input.color}&quot;&gt;{{input.name}}&lt;/td&gt;
  </code></pre>
  <p><strong>I want to get rid of this extra property, but I can't figure out how can I use computed property inside of v-for loop to make red color for state==0 and green for state==1</strong>.</p>