Vue.JS无法读取json数据

时间:2019-12-11 08:30:47

标签: html css vue.js popup vuetify.js

所以我是Vue JS的新手。我正在创建此页面,其中有一个按钮,单击该按钮会弹出一个聊天模块。这是我当前的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Query Management</title>
<style>
.headline {
  text-align: center;
  font-weight: 100;
  color: white;
}
.chat-area {
/*   border: 1px solid #ccc; */
  background: white;
  height: 50vh;
  padding: 1em;
  overflow: auto;
  max-width: 350px;
  margin: 0 auto 2em auto;
}
.message {
  width: 45%;
  border-radius: 10px;
  padding: .5em;
/*   margin-bottom: .5em; */
  font-size: .8em;
}
.message-out {
  background: #407FFF;
  color: white;
  margin-left: 50%;
}
.message-in {
  background: #F1F0F0;
  color: black;
}
.chat-inputs {
  display: flex;
  justify-content: space-between;
}
#person1-input {
  padding: .5em;
}
#person2-input {
  padding: .5em;  
}

  #app {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.btn {
  padding: 8px 16px;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: #ffffff;
  box-shadow: 2px 2px 20px 1px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

.modal-header,
.modal-footer {
  padding: 15px;
  display: flex;
}

.modal-header {
  border-bottom: 1px solid #eeeeee;
  color: #415982;
  justify-content: space-between;
}

.modal-footer {
  border-top: 1px solid #eeeeee;
  justify-content: flex-end;
}

.modal-body {
  position: relative;
  padding: 20px 10px;
}

.btn-close {
  border: none;
  font-size: 20px;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
  color: #415982;
  background: transparent;
}

.btn {
  color: white;
  background: #415982;
  border: 1px solid #415982;
  border-radius: 30px;
}

.modal-fade-enter,
.modal-fade-leave-active {
  opacity: 0;
}

.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.5s ease;
}
</style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<div id="app">
<button type="button" class="btn" @click="showModal">
?
</button>
<modal v-show="isModalVisible" @close="closeModal" />
</div>
<script type="text/x-template" id="modal">

  <transition name="modal-fade">
    <div class="modal-backdrop" role="dialog">
      <div class="modal" ref="modal">
        <header class="modal-header">
          <slot name="header">
            <h2>
             We're thinking of a good title for this box
            </h2>

            <button type="button" class="btn-close btn-right" @click="close" aria-label="Close modal">
              x
            </button>
          </slot>
        </header>

        <section class="modal-body">
          <slot name="body">
 <section ref="chatArea" class="chat-area">
   <p v-for="message in $parent.messages" class="message" :class="{ 'message-out': message.author === 'you', 'message-in': message.author !== 'support' }">
      {{ message.body }}
    </p>

  </section>
          </slot>
        </section>

        <footer class="modal-footer">
          <slot name="footer">
            <button type="button" class="btn btn-green" @click="close" aria-label="Close modal">
              Close Chat
            </button>
          </slot>
        </footer>
      </div>
    </div>
  </transition>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js'></script>
<script id="rendered-js">
      const Modal = {
  name: 'modal',
  template: '#modal',
  methods: {
    close(event) {
      this.$emit('close');
    } } };



new Vue({
  el: '#app',
  name: 'app',
  components: {
    modal: Modal 
    },

  data() {
messages: [
      {
        body: 'Welcome to the chat, I\'m Bob!',
        author: 'bob'
      },
      {
        body: 'Thank you Bob',
        author: 'you'
      },
      {
        body: 'You\'re most welcome',
        author: 'bob'
      }
    ]
    return {

      isModalVisible: false 
      };


  },


  methods: {
  sendMessage(direction) {
      if (!this.youMessage && !this.bobMessage) {
        return;
      }
      if (direction === 'out') {
        this.messages.push({ body: this.youMessage, author: 'you' });
        this.youMessage = '';
      } else if (direction === 'in') {
        this.messages.push({ body: this.bobMessage, author: 'support' });
        this.bobMessage = '';
      } else {
        alert('There was an error processing the chat... Please try again later!');
      }
      Vue.nextTick(() => {
        let messageDisplay = this.$refs.chatArea;
        messageDisplay.scrollTop = messageDisplay.scrollHeight;
      });
    },
    showModal() {
      this.isModalVisible = true;

    },
    closeModal() {
      this.isModalVisible = false;
    } } 


    });
    </script>
</body>
</html>

此代码的问题是,单击按钮时,弹出的框只是一个空框。我无法使聊天出现在框内。有什么想法我要去哪里吗?

1 个答案:

答案 0 :(得分:1)

您尚未在data()的return中保留messages数组,这就是它不显示消息的原因,您可以在下面看到:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Query Management</title>
<style>
.headline {
  text-align: center;
  font-weight: 100;
  color: white;
}
.chat-area {
/*   border: 1px solid #ccc; */
  background: white;
  height: 50vh;
  padding: 1em;
  overflow: auto;
  max-width: 350px;
  margin: 0 auto 2em auto;
}
.message {
  width: 45%;
  border-radius: 10px;
  padding: .5em;
/*   margin-bottom: .5em; */
  font-size: .8em;
}
.message-out {
  background: #407FFF;
  color: white;
  margin-left: 50%;
}
.message-in {
  background: #F1F0F0;
  color: black;
}
.chat-inputs {
  display: flex;
  justify-content: space-between;
}
#person1-input {
  padding: .5em;
}
#person2-input {
  padding: .5em;  
}

  #app {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.btn {
  padding: 8px 16px;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: #ffffff;
  box-shadow: 2px 2px 20px 1px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

.modal-header,
.modal-footer {
  padding: 15px;
  display: flex;
}

.modal-header {
  border-bottom: 1px solid #eeeeee;
  color: #415982;
  justify-content: space-between;
}

.modal-footer {
  border-top: 1px solid #eeeeee;
  justify-content: flex-end;
}

.modal-body {
  position: relative;
  padding: 20px 10px;
}

.btn-close {
  border: none;
  font-size: 20px;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
  color: #415982;
  background: transparent;
}

.btn {
  color: white;
  background: #415982;
  border: 1px solid #415982;
  border-radius: 30px;
}

.modal-fade-enter,
.modal-fade-leave-active {
  opacity: 0;
}

.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.5s ease;
}
</style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<div id="app">
<button type="button" class="btn" @click="showModal">
?
</button>
<modal v-show="isModalVisible" @close="closeModal" />
</div>
<script type="text/x-template" id="modal">

  <transition name="modal-fade">
    <div class="modal-backdrop" role="dialog">
      <div class="modal" ref="modal">
        <header class="modal-header">
          <slot name="header">
            <h2>
             We're thinking of a good title for this box
            </h2>

            <button type="button" class="btn-close btn-right" @click="close" aria-label="Close modal">
              x
            </button>
          </slot>
        </header>

        <section class="modal-body">
          <slot name="body">
 <section ref="chatArea" class="chat-area">
   <p v-for="message in $parent.messages" class="message" :class="{ 'message-out': message.author === 'you', 'message-in': message.author !== 'support' }">
      {{ message.body }}
    </p>

  </section>
          </slot>
        </section>

        <footer class="modal-footer">
          <slot name="footer">
            <button type="button" class="btn btn-green" @click="close" aria-label="Close modal">
              Close Chat
            </button>
          </slot>
        </footer>
      </div>
    </div>
  </transition>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js'></script>
<script id="rendered-js">
      const Modal = {
  name: 'modal',
  template: '#modal',
  methods: {
    close(event) {
      this.$emit('close');
    } } };



new Vue({
  el: '#app',
  name: 'app',
  components: {
    modal: Modal 
    },

  data() {

    return {

      isModalVisible: false,
      messages: [
      {
        body: 'Welcome to the chat, I\'m Bob!',
        author: 'bob'
      },
      {
        body: 'Thank you Bob',
        author: 'you'
      },
      {
        body: 'You\'re most welcome',
        author: 'bob'
      }
    ]
      };


  },


  methods: {
  sendMessage(direction) {
      if (!this.youMessage && !this.bobMessage) {
        return;
      }
      if (direction === 'out') {
        this.messages.push({ body: this.youMessage, author: 'you' });
        this.youMessage = '';
      } else if (direction === 'in') {
        this.messages.push({ body: this.bobMessage, author: 'support' });
        this.bobMessage = '';
      } else {
        alert('There was an error processing the chat... Please try again later!');
      }
      Vue.nextTick(() => {
        let messageDisplay = this.$refs.chatArea;
        messageDisplay.scrollTop = messageDisplay.scrollHeight;
      });
    },
    showModal() {
      this.isModalVisible = true;

    },
    closeModal() {
      this.isModalVisible = false;
    } } 


    });
    </script>
</body>
</html>