Question

当前正在将WordPress用于一个简单的网站，我想将VueJS添加到模板中。

如果Twitch API返回特定流在线，我将尝试有条件地显示iframe。

我在顶部的header.php中包含了CDN：

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

header.php末尾的某个地方，我创建了要与VueJS一起使用的div。

  <div id="stream">
            {{live}}
            <div v-if="live">
                <iframe src="https://player.twitch.tv/?channel=someTwitchUser" frameborder="0" allowfullscreen="true" scrolling="no" height="678" width="1200"></iframe>
            </div>
        </div>

最后是我们的VueJS decleration + axios方法。

<script>
    import axios from 'axios';
    var id = "Client-Id";
    var stream = new Vue({
        el: '#stream',
        data: {
            live: null
        },
        mounted() {
            axios
                .get('https://api.twitch.tv/kraken/streams/sometwitchuser', {headers: {id: "somekeyhere"}})
                .then(response => {
                    this.live = response.data.stream;
                    console.log(response.data);
                })
        }
    });
    </script>

因此，基本上我不能像我期望的那样在控制台中看到任何内容。而且，{{live}}在视图中返回为{{live}}。这使我表达出VueJS根本没有做任何事情。

我想念什么吗？这样不能使用VueJS吗？有人在WordPress中使用vueJ有经验吗？

Answer 1

您不能在浏览器中使用语法contenteditable=true来使用已使用的webpack或parcel之类的模块捆绑器，

但是您的范围内已经有axios，所以我认为如果您删除 import * from '...' 你会顺利的

WordPress内部的VueJ无法运行

1 个答案: