TransWikia.com

3 errors on function from vue js

Stack Overflow Asked by Nicolas Vanhuynegem on January 28, 2021

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

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!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP