Question

我一直在努力使用Vue.js更新页面段落中包含的值。确实如您在下面看到的那样，在vueLog Vue的axios语句中，我试图在 {{loggeg_in_msg}} 字段中输入一条消息“ Welcome username ”。包含在我的导航中。（我是使用存储在cookie中的访问令牌从get请求中获取此用户名的。）

我实际上在 then（）语句中放置了一个console.log，以查看我是否在分配适当的值，并且是否返回了预期的值。那我绑定的这个肯定有一个错误，但是我看不到我有什么错误。

以下是摘要：

nav.html

<div th:fragment="nav" class="container">
    <div class="row">
        <div class="twelve columns">
            <ul class="navMenu">
                <li><a href="/">Home</a></li>
                <li><a href="/login">Login</a></li>
                <li><a href="/categories">Categories</a></li>
            </ul>
        </div>
        <p id="loggedIn">{{logged_in_msg}}</p>
    </div>
</div>

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="fragments/header :: header('Home')" />
<body>
<div id="root">
    <div th:replace="fragments/nav :: nav"></div>
    <div Class="container"></div>
        <div class="row">
            <div class="twelve columns">
                <h1>HKEstate</h1>
                <ul>
                    <li v-for="post in posts">
                        <h3>{{post.title}}</h3>
                        <p>{{post.body}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<div th:replace="fragments/footer :: foot"></div>
<script>
var app = new Vue({
    el: '#root',
    data : {posts: []},
    mounted(){
        this.fetchPosts();
    },
    methods: {
        fetchPosts(){
            axios.get("/posts").then(function(response){
                this.posts = response.data;
            }.bind(this));
        },
        getLink(post){
            return '/post/' + post.id;
        }
    }
});
</script>
</html>

footer.html

<div th:fragment="foot" th:remove="tag">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script src="/js/script.js"></script>
</div>

script.js

function getCookie(name) {
    var value = "; " + document.cookie;
    var parts = value.split("; " + name + "=");
    if (parts.length == 2) return parts.pop().split(";").shift();
}

function isAnonymous(name){
    return name == "anonymousUser";
}

var vueLog = new Vue({
    el : "#loggedIn",
    data : {logged_in_msg : ""},
    mounted(){
        var isLoggedIn = false;
        if(!(getCookie("access_token")==null)){
            axios.get("/getUsername?access_token=" + getCookie("access_token"))
                .then(function(response){
                    this.logged_in_msg = "welcome "+response.data;
                    console.log(this.logged_in_msg)
                }.bind(this))
                .catch(function(error){
                    console.log("OK3:"+error.stack )
                    //TODO delete cookie?
                }.bind(this));
        }
    }
});

到目前为止，当我检查页面时，我所拥有的只是一个空的段落

。有什么我想念的吗？

无法使用Vue.js更新字段值

0 个答案: