How to use 'new vue' in Quasar

[Oxar]

Hi there,

I have just started learning the Quasar framework.
I am trying to build a simple dynamic table with editable fields and rows that can be added and removed. I am doing this incrementally.
I have been playing with code that I found on the net written in vue.js.
In this code a new instance of vue is created. to initialise
var vm = new Vue({
el: ‘#app’,
data: {
rows: [
{id: 1, name: ‘Rad’, cot: ‘lomdn’, instn: ‘mA’}

etc…

In my <script>, I have been trying the following
export default{
el: ‘#testapp1’,
data () {
return {
rows: [
{id: 1, name: ‘Rad’, cot: ‘lomdn’, instn: ‘mA’}

When I build , I get a blank screen with only the layout displayed correctly.
Is this the correct way to achieve this? How do I create a new vue in the Quasar framework? I have gone through the guides on the website but haven’t found an answer. Any guidance is appreciated.

Thanks,
A

[brunomeurer]

Hello Oxar,

The new Vue make a new instance of vue and we must created just only once. The quasar framework already make this for us and you should not worry about that. Your scructure is ok, but you dont have <template></template> or <style></style> like this:

<template>
  <div v-for="(item, index) in rows" :key="index">
     {{item.name}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      rows: [
        {id: 1, name: ‘Rad’, cot: ‘lomdn’, instn: ‘mA’}
      }
    }
  }
}
</script>

<style>

</style>

Regards,
Bruno Meurer

[Oxar]

Thanks Bruno. That helped.