Vue3 - test

by Eugene Manager

HTML

<head>
  <title>Comments</title>
  <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <comment-list></comment-list>
  </div>
</body>

JavaScript

const CommentList = {
   		data() {
        return {
          comments: [],
          newComment: ''
        }
      },
      template: `
        <div>
          <form @submit.prevent="addComment">
            <input type="text" v-model="newComment">
            <input type="submit" value="Post">
          </form>
          <ul>
            <li v-for="comment in comments" :key="comment">{{ comment }}</li>
          </ul>
        </div>
      `,
      methods: {
        addComment() {
          if (this.newComment) {
            this.comments.push(this.newComment);
            this.newComment = '';
          }
        }
      },
     mounted() {
        // Preload comments when component is mounted
        this.comments = ['Great post!', 'Very informative.', 'Thanks for sharing!'];
      },
    };

    const app = Vue.createApp({});
    app.component('comment-list', CommentList);
    app.mount('#app');

    //let commentInput = document.querySelector("input[type='text']");
    //let button = document.querySelector("input[type='button']");
    //commentInput.value = "test";
    //commentInput.dispatchEvent(new Event('input', { bubbles: true }));
    //button.click();
    //setTimeout(() => console.log(document.querySelector("ul").innerHTML));