Блог

У меня есть список элементов, заголовок которых является ссылкой для отображения подробного представления элемента. Щелкните заголовок, и он правильно перейдет к url Id. При сборах Vue страница сведений извлекает элемент с соответствующим идентификатором, но as и array не являются объектом, а шаблон не отображает никаких свойств — чего мне не хватает?

 <script>
import axios from "axios";

export default {
  name: "Report",

  data() {
    return {
      report: {}
    };
  },

  mounted: function() {
    this.getReport();
  },

  methods: {
    getReport() {
      let uri = "http://localhost:5000/api/reports/"   this.$route.params.id;
      axios.get(uri).then(response => {
        this.report = response.data;
      });
    }
  }
};
</script>
  

Шаблон настолько

 <template>
  <v-content>
    <h1>report detail page</h1>
    <p>content will go here</p>-
      <h3>{{ report.month }}</h3>
      <pre>{{ report._id }}</pre>
  </v-content>
</template>
  

любые комментарии приветствуются

url Id

Похоже, ваша проблема в том, что вы получаете массив, а не объект.

Вы можете легко извлекать объекты, инкапсулированные внутри массивов.

Например, если бы у нас были следующие данные:

var bus1 = {passengers:10, shift:1}
var busArr = [bus1]

что мы можем утверждать: busArr === [{passengers:10, shift:1}]

Затем мы могли бы извлечь bus1, сославшись на индекс 0:

var bus1New = busArr[0]

Если вы хотите избежать преобразования данных и просто вывести структуру, вы можете использовать v-for в своем шаблоне.

<p v-for="val in report">
_id: {{val._id}}
<br>
month: {{val.month}}
</p>