AnswerBun.com

3 errors on function from vue js

My errors:

  1. app.js:44406 [Vue warn]: Property or method "__" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
    found in —> <ChatComponent> at resources/js/components/ChatComponent.vue

  2. app.js:44406 [Vue warn]: Error in render: "TypeError: vm._ is not a function" found in
    —> <ChatComponent> at resources/js/components/ChatComponent.vue

  3. TypeError: vm._ is not a function.

<template>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="card">
        <div class="card-body minh overflow-auto"></div>
      </div>
      <div class="mt-3">
        <div class="form-group">
          <div class="input-group mb-3">
            <input
              type="text"
              class="form-control"
              v-bind:placeholder="placeholder"
              aria-label="Recipient's username"
              aria-describedby="button-addon2"
              v-model="messageField"
            />
            <div class="input-group-append">
              <button class="btn btn-primary" type="button" id="button-addon2">{{__('auth.submit')}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let messages = {};
export default {
  data() {
      return{
          messages: {},
        messageField: ""
      }
  },
  props:[
      'placeholder'
  ],
  mounted() {
    this.getMessagess();
  },
  methods: {
    getMessagess() {
      axios
        .get("/messagefetch")
        .then(response => {
          this.messages = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    postMessage() {
      axios
        .post("/api/messagesend", {
          api_token: this.user.api_token,
          message: this.messageField
        })
        .then(response => {
          this.message.push(response.data);
          this.messageField = "";
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

I get my messages from the database and my prop placeholder is also good but i dont see my component in the front-end. Also, I get 3 errors for functions made by vue.js itself, which get compiled and put in app.js. Im new at vue.js so im not sure what im doing wrong

Stack Overflow Asked by Nicolas Vanhuynegem on January 28, 2021

1 Answers

One Answer

You are mixing frontend and backend functions. The __ function is a laravel specific helper for localisation of text. But you cannot use a laravel php function inside Vue JavaScript. Therefore you get errors that the function is not found, etc.

You need to configure localisation separately for your frontend. Have a look at: https://kazupon.github.io/vue-i18n/

Correct answer by Maarten Veerman on January 28, 2021

Add your own answers!

Related Questions

Javascript returning NaN when multiplying

0  Asked on January 21, 2021 by lm_margaux

       

How to use For Loop inside the map function in ReactJS

1  Asked on January 20, 2021 by muzamil-hussain

       

Upgrade .then .catch to async await and try catch

2  Asked on January 20, 2021 by sonetlumiere

 

Pandas sum of last four not nan values

1  Asked on January 20, 2021 by luca-r

         

Have the class as value in a dictionary

4  Asked on January 20, 2021 by bows

     

Add Speed to WASD Controls for A-Frame

2  Asked on January 19, 2021 by dionoh

   

Calculate the address of the subnet

2  Asked on January 19, 2021 by kingvince

 

IBM MQ Client running under Windows Docker

2  Asked on January 19, 2021 by lumberjack

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.