What is this :Object = ""?

Asked

Viewed 57 times

4

I found an excerpt of code that I didn’t understand what it does.

I searched but did not find an answer (or did not use the correct terms to search).

Code:

<div v-if="returnedObject" class="found-objects result">
  <Object :object="returnedObject"> </Object>
</div>

Specific excerpt that I did not understand:

  • :object="returnedObject"

They asked me to put all the code Complete code

<template>
  <div class="found-objects devolutions">
    <div class="content">
      <label class="titulo">Devolver objeto</label>
      <hr />
      <div class="flex-column-between">
        <label>Entre com o código de devolução:</label>
        <div class="flex-column-between">
          <input type="text" class="input" v-model="devolutionCode" />
          <button
            type="button"
            class="button is-success"
            @click="returnObject()"
          >
            Devolver objeto
          </button>
        </div>
      </div>
      <hr v-if="returnedObject" />
      <div v-if="returnedObject" class="found-objects result">
        <Object :object="returnedObject"> </Object>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      devolutionCode: null,
      returnedObject: null
    };
  },
  methods: {
    returnObject() {
      let body = { devolutionCode: this.devolutionCode };
      let config = {
        headers: {
          Authorization: "Bearer " + this.$store.state.token
        }
      };
      this.axios
        .patch("url", body, config)
        .then(response => {
          if (response.status === 200) {
            debugger
            alert("Objeto devolvido com sucesso");
            let devolution = this.devolutionCode;
            let devolutions;
            let devolutionsStr = localStorage.devolutionsStr;
            if (devolutionsStr && devolutionsStr !== "") {
              devolutions = JSON.parse(devolutionsStr);
              if (devolutions && devolutions.length > 0) {
                let alreadyExistentDevolution = devolutions.filter(
                  devol => devol === devolution
                );
                if (
                  alreadyExistentDevolution &&
                  alreadyExistentDevolution.length === 0
                ) {
                  devolutions.push(devolution);
                }
              } else {
                devolutions = [];
                devolutions.push(devolution);
              }
            } else {
              devolutions = [];
              devolutions.push(devolution);
            }
            localStorage.devolutionsStr = JSON.stringify(devolutions);
            this.goToReturnedObjects();
          } else {
            alert(
              "Erro ao tentar devolver objeto. Por favor, tente novamente."
            );
          }
          console.log(response);
          this.loading = false;
          // this.selectAddress(response.data.addressId, () => {
          //   this.$router.push("/endereco");
          // });
          // this.isLoading = false;
        })
        .catch(error => {
          console.log(error);
          alert("Erro ao tentar devolver objeto. Por favor, tente novamente.");
        });
    },
    goToReturnedObjects() {
      this.$router.push("/objetos-devolvidos");
    }
  }
};
</script>
html

  • Sounds like a syntax error to me.

  • @Try it If you upload the full html, you’ll surely get better answers.

  • 2

    It would be good to give a little more context where you got this excerpt from. It’s probably not pure HTML. HTML has a tag called Object, but the syntax is not that of your example. There must be some intermediate technology processing the data before generating "true" HTML, or else this excerpt came from some layout mechanism that resembles HTML but will not be used by a normal browser.

1 answer

4


As the question is solely about the :object in the code, I will not explain about the tag Object or something like that.

The two points(:) before the attribute is a directive of Vue.js to say that the value passed to the property is a javascript. It is a syntactic sugar to another directive, the v-bind.

See a use case:

Vue.component('vue-component', {
  props: ['object'], // Espero pela propriedade "object"
  template: '<div>{{ object }}</div>'
});

new Vue({
    el: '#databinding',
    data: {
        returnedObject : "" // Crio a variável "returnedObject" para o contexto da div com id "databinding"
    }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<div id="databinding">
    <input type="text" v-model="returnedObject">
    <vue-component :object="returnedObject" /> <!-- Passo a variavel returnedObject como parâmetro para a propriedade object -->
</div>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.