在 Firebase 托管上托管 Vue答案

【问题标题】：Host Vue on Firebase Hosting在 Firebase 托管上托管 Vue
【发布时间】：2020-06-17 14:39:41
【问题描述】：

我正在尝试在 Firebase 上使用此代码托管，但它不起作用。 {{Item.name}} 出现而不是值:( 我已经在 Codepen 上测试了相同的代码并且它有效。 Firebase 是否接受 vue.min.js？部署时，网站会显示 {{var}} 而不是 Google 表格中的表格值。

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

【问题讨论】：

标签： javascript html firebase vue.js google-sheets

【解决方案1】：

看起来唯一错误的是标签的顺序。

你只需要在<div id="app">标签被加载到DOM之后运行vue代码。这是一个例子：

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

【讨论】：