Raw expression: :href="{{demo.hrefs}}"

Dear 丶 2022-05-21 12:45 129阅读 0赞

1、错误描述

Failed to compile.
    
    ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-04c2046b","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue
    (Emitted value instead of an instance of Error) 
      Error compiling template:
      
      <div id="app">
        <img src="./assets/logo.png">
        <h1>{
       { msg }}</h1>
        <h2>实例</h2>
        <ol>
        	<li v-for="item in items">{
       {item.name}}</li>
        </ol>
        <h2>必要连接</h2>
        <ul>
          <li v-for="demo in demos"><a :href="{
       {demo.hrefs}}" target="_blank">{
       {demo.content}}</a></li>
        </ul>
        <h2>生态系统</h2>
        <ul>
          <li v-for="system in systems"><a :href="system.hrefs" target="_blank">{
       {system.content}}</a></li>
        </ul>
      </div>
      
      - invalid expression: Unexpected token { in
    
        {
       {demo.hrefs}}
    
      Raw expression: :href="{
       {demo.hrefs}}"
    
    
     @ ./src/App.vue 11:0-238
     @ ./src/main.js
     @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

2、错误原因

在绑定超级链接中的href属性，不需要\{ \{\}\}；如果添加了\{ \{\}\}反而会出错

3、解决办法

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <h1>{
       { msg }}</h1>
        <h2>实例</h2>
        <ol>
        	<li v-for="item in items">{
       {item.name}}</li>
        </ol>
        <h2>必要连接</h2>
        <ul>
          <li v-for="demo in demos"><a :href="demo.hrefs" target="_blank">{
       {demo.content}}</a></li>
        </ul>
        <h2>生态系统</h2>
        <ul>
          <li v-for="system in systems"><a :href="system.hrefs" target="_blank">{
       {system.content}}</a></li>
        </ul>
      </div>
    </template>
    
    <script>
    	export default {
    	  name: 'app',
    	  data () {
    	    return {
    	      msg: '简单模板',
    	      items:[
    	      	{name:'Vue.js'},
    	      	{name:'HTML5'},
    	      	{name:'CSS3'},
    	      	{name:'C++'},
    	      	{name:'Java'}
    	      ],
    	      demos:[
    	      	{hrefs:"https://vuejs.org",content:"核心文档"},
    	      	{hrefs:"https://forum.vuejs.org",content:"Forum"},
    	      	{hrefs:"https://chat.vuejs.org",content:"社区聊天"},
    	      	{hrefs:"https://twitter.com/vuejs",content:"Twitter"}
    	      ],
    	      systems:[
    	      	{hrefs:"http://router.vuejs.org/",content:"vue路由"},
    	      	{hrefs:"http://vuex.vuejs.org/",content:"vuex"},
    	      	{hrefs:"http://vue-loader.vuejs.org/",content:"vue-loader"},
    	      	{hrefs:"https://github.com/vuejs/awesome-vue",content:"awesome-vue"}
    	      ]
    	    }
    	  }
    	}
    </script>
    
    <style lang="scss">
    	#app {
    	  font-family: 'Avenir', Helvetica, Arial, sans-serif;
    	  -webkit-font-smoothing: antialiased;
    	  -moz-osx-font-smoothing: grayscale;
    	  text-align: center;
    	  color: #2c3e50;
    	  margin-top: 60px;
    	}
    	
    	h1, h2 {
    	  font-weight: normal;
    	}
    	
    	ul {
    	  list-style-type: none;
    	  padding: 0;
    	}
    	
    	li {
    	  display: inline-block;
    	  margin: 0 10px;
    	}
    	
    	a {
    	  color: #42b983;
    	}
    </style>