Why V-for displaying exact same code instead of values stored in that object?

Question

I am new to Vue js i am practicing for loop in vue js When i try to fetch data from my app js file into my welcome blade file it displays the exact same variable that i wrote in code instead of showing value stored in the object.

Here is my code of app.js file

require('./bootstrap');
    
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
    
const app = new Vue({
  el: '#app'
  data: {
    message: '',
    tasks: [
      { name: 'Foo' },
      { name: 'Bar' }
    ]
  }
});

and this is my welcome blade file code

links

<link href="/css/app.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/js/app.js"> </script>

and the list i want to repeat

<div class="title m-b-md" id="app">
  <ul>
    <li v-for="task in tasks" >                     
      @{{ task.name }}                      
    </li>
  </ul>
  <example></example>
</div>

Its laravel related because if i dont use @ the error comes which says no php variable task defined in and @ solves it to show it is for vue js — Mohammad Fahad Rao, Sep 13 '20 at 22:33
Sorry, I thought that the last box was in your vue template. — Jonathan Martins, Sep 13 '20 at 22:35
Does this answer your question? [how to change delimiters in Vue.js](https://stackoverflow.com/questions/48125577/how-to-change-delimiters-in-vue-js) — Phil, Sep 13 '20 at 23:23

score -1 · Answer 1 · answered Sep 14 '20 at 01:23

-1

 <div class="title m-b-md" id="app">
 <ul>
  <li v-for="(task,index) in tasks" :key="task.name">                     
   @{{ task.name }}                      
  </li>
 </ul>
 <example></example>
 </div>

answered Sep 14 '20 at 01:23

胖小子

1

2

Hi, welcome to SO. Thanks for taking some time out to answer this question, with small changes we can make it more clear for other users. Have a look at [tips for good answers](https://stackoverflow.com/help/how-to-answer) before you update the answer. – Hamid Ali Sep 14 '20 at 06:53

Why V-for displaying exact same code instead of values stored in that object?

1 Answers1