Javascript vue.js:HTML元素显示如果不切换更改_Javascript_Vue.js

Javascript vue.js:HTML元素显示如果不切换更改

javascript vue.js

Javascript vue.js:HTML元素显示如果不切换更改,javascript,vue.js,Javascript,Vue.js,我最初是通过对数据库的API调用呈现一些对象，它们被序列化，最初看起来如下所示： <h3>Messages on Database</h3> <p v-if="messages.length ===0">No Messages</p> <div class="msg" v-for="(msg, index) in messages" :key="index"> <p class="msg-index

我最初是通过对数据库的API调用呈现一些对象，它们被序列化，最初看起来如下所示：

<h3>Messages on Database</h3>
    <p v-if="messages.length ===0">No Messages</p>
    <div class="msg" v-for="(msg, index) in messages" :key="index">
        <p class="msg-index">[{{index}}]</p>

        <p class="msg-subject" v-html="msg.subject" v-if="!msg.editing"></p>
        <p><input type="text" v-model="msg.subject" v-if="msg.editing" ></p>
        <p>{{msg.editing}}</p>
        <p class="msg-body" v-html="msg.body" v-show="!messages[index].editing"></p>
        <p><input type="text" v-model="msg.body" v-show="messages[index].editing" ></p>

        <input type="submit" @click="deleteMsg(msg.pk)" value="Delete" />
        <input type="submit" @click="EditMsg(index)" value="Edit" />
        <input type="submit" @click="updateMsg(msg.pk)" value="Update" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Messages",
  data() {
    return {
      subject: "",
      msgBody: "",
      messages: [],
    };

现在，当我在控制台中加载阵列时，我看到：

因此我假设现在，当用户单击

Edit

按钮时，调用

EditMsg

，字段将根据

v-if

v-show

指令进行转换：

EditMsg(msgIdx) {
        this.messages[msgIdx].editing = true;
        console.log(this.messages);
    },

但事实并非如此。实际情况是：在console/vue developer tools窗口中，项目的

编辑

标志更改为

true

，但HTML中没有任何更改

我错过了什么

完整代码：

<template>
  <div class="hello">
    <img src='@/assets/logo-django.png' style="width: 250px" />
    <p>The data below is added/removed from the Postgres Database using Django's ORM and Restframork.</p>
    <br/>
    <p>Subject</p>
    <input type="text" placeholder="Hello" v-model="subject">
    <p>Message</p>
    <input type="text" placeholder="From the other side" v-model="msgBody">
    <br><br>
    <input type="submit" value="Add" @click="postMessage" :disabled="!subject || !msgBody">

    <hr/>
    <h3>Messages on Database</h3>
    <p v-if="messages.length ===0">No Messages</p>
    <div class="msg" v-for="(msg, index) in messages" :key="index">
        <p class="msg-index">[{{index}}]</p>

        <p class="msg-subject" v-html="msg.subject" v-if="!msg.editing"></p>
        <p><input type="text" v-model="msg.subject" v-if="msg.editing" ></p>
        <p>{{msg.editing}}</p>
        <p class="msg-body" v-html="msg.body" v-show="!messages[index].editing"></p>
        <p><input type="text" v-model="msg.body" v-show="messages[index].editing" ></p>

        <input type="submit" @click="deleteMsg(msg.pk)" value="Delete" />
        <input type="submit" @click="EditMsg(index)" value="Edit" />
        <input type="submit" @click="updateMsg(msg.pk)" value="Update" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Messages",
  data() {
    return {
      subject: "",
      msgBody: "",
      messages: [],
    };
  },
  mounted() {
    this.fetchMessages();
  },
  methods: {
    fetchMessages() {
      this.$backend.$fetchMessages().then(responseData => {
        this.messages = responseData;
        this.messages.forEach(function (value) {
           value['editing'] = false;
        });
        console.log(this.messages);
      });
    },
    postMessage() {
      const payload = { subject: this.subject, body: this.msgBody };
      this.$backend.$postMessage(payload).then(() => {
        this.msgBody = "";
        this.subject = "";
        this.fetchMessages();
      });
    },
    deleteMsg(msgId) {
        this.$backend.$deleteMessage(msgId).then(() => {
            this.messages = this.messages.filter(m => m.pk !== msgId);
            this.fetchMessages();
        });
    },
    EditMsg(msgIdx) {
        this.messages[msgIdx].editing = true;
        console.log(this.messages);
    },
    updateMsg(msgId) {
        console.log(this.subject, this.msgBody);
        const payload = { subject: this.subject, body: this.msgBody };
        this.$backend.$putMessage(msgId, payload).then(() => {
            this.fetchMessages();
            }
        )
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
hr {
  max-width: 65%;
}

.msg {
  margin: 0 auto;
  max-width: 30%;
  text-align: left;
  border-bottom: 1px solid #ccc;
  padding: 1rem;
}

.msg-index {
  color: #ccc;
  font-size: 0.8rem;
  /* margin-bottom: 0; */
}

img {
  width: 250px;
  padding-top: 50px;
  padding-bottom: 50px;
}

</style>


下面的数据是使用Django的ORM和Restframork从Postgres数据库中添加/删除的


主题
信息




数据库上的消息
没有消息
[{{index}]


{{msg.editing}


导出默认值{
名称：“消息”，
数据（）{
返回{
主题：“，
msgBody:“，
信息：[]，
};
},
安装的（）{
this.fetchMessages（）；
},
方法：{
fetchMessages（）{
这是。$backend。$fetchMessages（）。然后（responseData=>{
this.messages=responseData；
this.messages.forEach（函数（值）{
值['editing']=false；
});
console.log（this.messages）；
});
},
postMessage（）{
常量有效负载={subject:this.subject，body:this.msgBody}；
这是。$backend。$postMessage（有效负载）。然后（（）=>{
this.msgBody=“”；
this.subject=“”；
this.fetchMessages（）；
});
},
deleteMsg（msgId）{
这是。$backend。$deleteMessage（msgId）。然后（（）=>{
this.messages=this.messages.filter（m=>m.pk！==msgId）；
this.fetchMessages（）；
});
},
EditMsg（msgIdx）{
this.messages[msgIdx].editing=true；
console.log（this.messages）；
},
updateMsg（msgId）{
console.log（this.subject，this.msgBody）；
常量有效负载={subject:this.subject，body:this.msgBody}；
这是。$backend。$putMessage（msgId，有效负载）。然后（（）=>{
this.fetchMessages（）；
}
)
}
}
};
人力资源{
最大宽度：65%；
}
味精{
保证金：0自动；
最大宽度：30%；
文本对齐：左对齐；
边框底部：1px实心#ccc；
填充：1rem；
}
.msg索引{
颜色：#ccc；
字体大小：0.8rem；
/*页边距底部：0*/
}
img{
宽度：250px；
填充顶部：50px；
填充底部：50px；
}

根据：

Vue通过使用

对象转换属性来观察数据。defineProperty

。但是，在ECMAScript 5中，无法检测何时将新属性添加到对象或何时从对象中删除属性

因此，当您将响应数据绑定到

this.messages

时，Vue不再认为数组属性的任何变化是反应性的

相反，如果在将

responseData

属性绑定到Vue数据属性之前对其进行了丰富，则所有数组都将保持反应状态。我的意思是：

fetchMessages() {
 this.$backend.$fetchMessages().then(responseData => {
        let editableMessages = responseData;
        editableMessages.forEach(function (value) {
           value['editing'] = false;
        });
        this.messages = editableMessages;
      });
}

这里有一个基于您的域的链接。

根据：