3 errors on function from vue js

Question

My errors:

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
app.js:44406 [Vue warn]: Error in render: "TypeError: vm._ is not a function" found in ---> <ChatComponent> at resources/js/components/ChatComponent.vue
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

Maarten Veerman Maarten Veerman · Accepted Answer · 2020-08-29T20:54:45

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/

3 errors on function from vue js

1 Answers