CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2vue-component
A.K.M. Adib
A.K.M. Adib

Reputation: 577

How to have things data in vuejs to be printed in console

Say I have a data object and in that object, there is a property called anime1. How would I access have anime1 printed on the console as the user types their input in. This entire thing is in a component. I tried creating a function called log that when pressed would console.log the value of anime1 but that didn't work. This is what I've tried out so far.

<template>
  <section class="hero">
    <div class="parent-1">
      <h1 class="title is-1">Compare two animes! :)</h1>
    </div>
    <div class="columns">
      <div class="column">
        <b-field class="label" label="Anime 1">
          <b-input value="Enter the first anime!" v-model="anime1"></b-input>
        </b-field>
      </div>
      <div class="column">
        <b-field class="label" label="Anime 2">
          <b-input value="Enter the second anime!" v-model="anime2"></b-input>
        </b-field>
      </div>
    </div>
    <div class="button-spacing">
      <b-button class="button" type="is-primary" click="@log"
        >Compare!</b-button
      >
    </div>
  </section>
</template>

<script>
import Vue from "vue";
import Buefy from "buefy";
import "buefy/dist/buefy.css";
Vue.use(Buefy);

export default {
  data() {
    return {
      anime1: "",
      anime2: "",
    };
  },

  methods: {
    log(anime1) {
      console.log(anime1);
    },
  },
};
</script>

<style>
.title.is-1 {
  text-align: center;
}
.parent-1 {
  margin-top: 10%;
}
.columns {
  margin-top: 2%;
  margin-right: 10%;
  margin-left: 10%;
}
.label {
  text-align: center;
}
.button {
  width: 10%;
}
.button-spacing {
  text-align: center;
}
</style>

Upvotes: 0

Views: 1313

Answers (1)

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

To call a function as you type on the input field, add @input to it.

<b-input value="Enter the first anime!" v-model="anime1" @input="log()"></b-input>

Then, you can easily access the anime1 inside your log() using this.anime1 so you don't need to put parameters on it.

data() {
  return {
    anime1: "",
    anime2: "",
  }
},
methods: {
  log(){
    console.log(this.anime1)
  }
}

Alternatively, as @Sphinx said in the comment, you can watch the anime1, then call a function once it changes.

<b-input value="Enter the first anime!" v-model="anime1"></b-input>

data() {
  return {
    anime1: "",
    anime2: "",
  }
},
watch: {
  anime1(newVal) {
    this.log(newVal);
  }
},
methods: {
  log(string) {
    console.log(string);
  },
}

Also, the way you add your click handler on your button won't work. It should be v-on:click, or simply @click. More on event handlers here.

<b-button class="button" type="is-primary" @click="log('comparing...')">Compare!</b-button>

Upvotes: 1

Related Questions