Vue.js 2无法插值属性值 [英] Vuejs 2 impossible to interpolate attribute values

问题描述

 < th：class = {'c-'+列，有效：sortKey == column} 
 v-for = getColumns（）中的列 @ click = sortBy（column）> 
 {{column}} 
< / th> 
  

我得到无效的表达式：意外的标记+ in

但是语法应该是正确的。

我尝试了20种其他方法，但每个人都失败了

即使我只在其中放入列，我也会得到[Object object]而不是实际的列名

---

因此，这在es6模板语法中根本不起作用。
仅当我将模板放在index.html文件中的< script> 标记内

 导出默认值{
 
模板：`
< div：class = [c-$ {column}]> 
 .... 
< router-link：to = / list / $ {item.name}>测试< / router-link> 
 .... 
< / div> 
`，
 
 created（）{
 
} 
 
} 
  

我尝试过

  $ {column}-未定义变量
 $ {$ column}-未定义的变量
`$ {column}`-意外标识符
 {{column}}-vue 
 中的无效表达式 
 
 
以及其他组合，都无法在es6模板语法内使用。 
 
 
 
 so vuejs模板不能与es6模块和模板语法一起使用吗？ 
解决方案
对于HTML类绑定，可以使用两种语法：
 
 
 
  对象语法  
 < div：class = {selected：isSelected}>< / div> 
  
该类的存在将取决于所使用数据属性的真实性。类绑定期望使用以下类型： {[key：string]：boolean} 或 Record< string，boolean> 。
 
 
 
使用模板字符串（反引号）作为对象属性名称时，需要将其包装在方括号中。
 
 
 
即：
 < div：class = {[$$ dynamicClassName}`]：true} >< / div> 
  
  数组语法  
 
 
 
还有数组语法，其中
 < div：class = ['selected'，'some-other- class']>< / div> 
  
我们可以在数组语法中使用对象语法，如下所示：
 < div：class = ['some-class'，{selected：isSelected}]>< / div> 
  
使用模板字符串：
 < div：class = [`$ {dynamicClassName}`，{[`$ {dynamicClassName2}`]：isSelected}]>< / div> 
  
 
 
 
 
 
 
编辑：
 
 
 
如果要使用模板文字，请尝试以下操作：
  template：`
 < div：class ='c-'+列> 
 .... 
< router-link：to =’/ list /’+ item.name>测试< / router-link> 
 .... 
< / div> 
`，
  
 
 <th :class="{'c-' + column, active: sortKey == column}"
      v-for="column in getColumns()" @click="sortBy(column)">
            {{ column }}
 </th>
I get invalid expression: Unexpected token + in


but the syntax is supposed to be correct.

I tried like 20 other ways and everyone fails

Even if I put only column in there i get [Object object] instead of the actual column name




so, this doesn't work at all inside es6 template syntax.
It only works if I put the templates inside <script> tags in the index.html file
export default{

  template: `
    <div :class="[c-${column}]">
       ....
       <router-link :to="/list/${item.name}"> test </router-link>
       ....
    </div>
  `,

   created(){

   }

 }
I tried
${column}   - undefined variable
${$column}  - undefined variable
`${column}` - unexpected identifier
{{column}}  - invalid expression in vue
and other combinations and neither works inside the es6 template syntax. 

so vuejs templates cannot be used with es6 modules and template syntax? 
解决方案
For HTML class bindings there are two syntax you can use:

Object syntax
<div :class="{ selected: isSelected }"></div>
The presence of the class will be determined by the truthiness of the data property used. The class binding is expecting the following type: { [key: string]: boolean } or Record<string, boolean>.

When using a template string (backticks) as an object property name, you need to wrap it in square brackets.

ie:
<div :class="{ [`${dynamicClassName}`]: true }"></div>
Array syntax

There is also the array syntax, which allows us to bind a list of classes.
<div :class="['selected', 'some-other-class']"></div>
We can use the object syntax in the array syntax like so:
<div :class="['some-class', { selected: isSelected }]"></div>
Using template strings:
<div :class="[`${dynamicClassName}`, { [`${dynamicClassName2}`]: isSelected }]"></div>




Edit:

Try the following if you want to use a template literal:
template: `
    <div :class="'c-' + column">
       ....
       <router-link :to="'/list/' + item.name"> test </router-link>
       ....
    </div>
  `,


                        
这篇关于Vue.js 2无法插值属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！