Host Vue on Firebase Hosting

Question

I'm trying to use this code hosting on Firebase, but it doesn't work. {{Item.name}} appears instead of the value :( I already tested the same code on Codepen and it worked. Does the firebase accept vue.min.js ? When deploying, the site displays the {{var}} instead of the table value in Google Sheets.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>






<script>
   var app = new Vue({
    el: '#app',
    mounted() {
        let vm = this
        axios
            .get(
                'https://sheets.googleapis.com/v4/spreadsheets/{sheetsID}/values/A2:C20?key={apiKey}'
            )
            .then(function (response) {
                let specials = response.data.values
                for (let index = 0; index < specials.length; index++) {
                    const element = specials[index]
                    let mitem = {
                        name: element[0],
                        description: element[1],
                        price: element[2]
                    }
                    if (vm.isEven(index)) {
                        vm.menuItems_L = vm.menuItems_L.concat(mitem)
                    } else {
                        vm.menuItems_R = vm.menuItems_R.concat(mitem)
                    }
                }
                console.log(response)
            })
    },
    data: {
        menuItems_L: [],
        menuItems_R: [],
        menuStyle: {
            background: '#f2f2f2',
            color: '#000'
        }
    },
    computed: {},
    methods: {
        isEven: function (n) {
            return n % 2 == 0
        }
    }
});
</script>

<body> :

<div id="app">
      <section id="specialssection" class="specials-container" v-if="menuItems_L" :style="menuStyle">
          <div id="special_component" :style="menuStyle">

              <div class="specials-table-container">
                  <table>
                      <tbody v-for="item in menuItems_L" :key="item.name">
                          <tr class="nameandprice">
                              <td>
                                  <span :style="menuStyle">{{item.name}}</span>
                              </td>
                              <td>
                                  <span :style="menuStyle">R${{item.price}}</span>
                              </td>
                          </tr>
                          <tr class="description">
                              <td colspan="2">{{item.description}}</td>
                          </tr>
                      </tbody>
                  </table>
                  <table>
                      <tbody v-for="item in menuItems_R" :key="`specialmenu-${item.name}`">
                          <tr class="nameandprice">
                              <td>
                                  <span :style="menuStyle">{{item.name}}</span>
                              </td>
                              <td>
                                  <span :style="menuStyle">${{item.price}}</span>
                              </td>
                          </tr>
                          <tr class="description">
                              <td colspan="2">{{item.description}}</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </section>
    </div>

Answer 1

It looks like the only thing wrong is the order of the tags.

You just need to run the vue code after the <div id="app"> tag is loaded into the DOM. Here's an example:

<html>
<head>
 <!-- Include all CDN scripts here -->
</head>

<body>
 <div id="app" >
 </div>

 <script>
   // Needs to be called after the <div id="app"> tag is loaded into the DOM
   var app = new Vue({
    el: '#app',
    ...
   })
 </script>
</body>


</html>

Host Vue on Firebase Hosting

Question

1 answers

solution1
0 2020-03-05 03:49:13

Host Vue on Firebase Hosting

Question

1 answers

solution1 0 2020-03-05 03:49:13

solution1
0 2020-03-05 03:49:13