CODEWITHSUNDEEP
javascriptvue.jsvue-component
user4269941
user4269941

Reputation:

What should I do in the data() function and in v-model?

I'm new in vue.js and in a single-file component page I want to post data in textarea and the checkbox (whether it has been checked or not).

I know I need to add sth like v-model in the textarea but I'm not clear about this, the api is as pictures below.

What should I do in the data() {return {}} part? Really confused about this part in vue.js and any help would be appreciated.

enter image description here

<template>
  <div>
    <div class="add-show">
      <div>
        <p class="title-comment">comment</p>
        <textarea class="content-comment" placeholder="write sth here" v-model="content"></textarea>
      </div>
       <div class="post-wrap">
        <div></div>
        <div class="post-content">
          <input type="checkbox" class="checkbox">
        </div>
      </div>
      <mt-button type="primary" class="mt-button">submit</mt-button>
  </div>
</template>

<script>
import dataService from 'services/dataService'
export default {
  data () {
    return {
      content: '',
      recommend: false
    }
  },
  methods: {
    addShow: function () {
      dataService.postShow(profile).then(() => {
        this.$toast({
        message: '发布成功',
        position: 'bottom'
        })
      })
    }
  }
}
</script>

<style scoped>
</style>

Upvotes: 3

Views: 484

Answers (1)

Saurabh
Saurabh

Reputation: 73619

I have create a sample fiddle for you here.

data for vue are variable which are reactive in nature, what I mean by this is when you change these variable in vue instance, they gets automatically changed in the views and vice versa. That's called two way binding.

v-model create a two-way binding on a form input element or a component. You can learn more about it here and here in official documentation, which is a good source to learn vue.

Code

HTML:

<div id="demo">
    <div class="add-show">
      <div>
        <p class="title-comment">comment</p>
        <textarea class="content-comment" placeholder="write sth here" v-model="content"></textarea>
      </div>
       <div class="post-wrap">
        <div></div>
        <div class="post-content">
          <input type="checkbox" class="checkbox" v-model="recommend">
        </div>
      </div>
      <button type="primary" class="mt-button">submit</button>
      <br>
      content:: {{content}}
      <br>
      recommend :: {{recommend}}
  </div>

JS:

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        content: '',
      recommend: false
      };
    }
})

Upvotes: 2

Related Questions