Хост Vue на хостинге Firebase - PullRequest
Новая
       4

Хост Vue на хостинге Firebase

1 голос
/ 05 марта 2020

Я пытаюсь использовать этот хостинг кода на Firebase, но он не работает. {{Item.name}} появляется вместо значения :( Я уже тестировал тот же код на Codepen, и он работал. Принимает ли firebase vue .min. js? При развертывании сайт отображает {{var}} вместо табличного значения в Google Sheets.

Я пытаюсь использовать этот хостинг кода на Firebase, но он не работает. {{Item.name}} появляется вместо значения :( Я уже тестировал тот же код на Codepen, и он работал. Принимает ли firebase vue .min. js? При развертывании сайт отображает {{var}} вместо значения таблицы в 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>

1 Ответ

0 голосов
/ 05 марта 2020

Похоже, единственное неправильное - это порядок тегов.

Вам нужно просто запустить код vue после загрузки тега <div id="app"> в DOM. Вот пример: 

<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>
...