<template>
  <div >
    <div
      
      v-for="repo in repos"
      :key="repo.id"
    >
      <div >
        <router-link :to="repo.html_url"
          ><h6>{{ repo.name }}</h6></router-link
        >
        <div >
          <div >
            <span>{{ repo.language }}</span>
          </div>
        </div>
      </div>
      <div >
        {{ repo.full_name }} <br />
        {{ repo.visibility }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Repositories",
  data() {
    return {
      repos: null,
      search: "",
    };
  },
  methods: {
    setData(data) {
      this.repos = data;
      console.log(this.repos.node_id);
    },
    searchData() {
      axios
        .get("https://api.github.com/repos/dimaswntech/"   this.search, {
          headers: {
            Authorization: "token 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",
          },
        })
        .then((response) => {
          this.setData(response.data);
          console.log(response.data);
        })
        .catch((error) => console.log(error));
      console.log(this.search);
    },
  },
  mounted() {
    axios
      .get("https://api.github.com/users/dimaswntech/repos", {
        headers: {
          Authorization: "token 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",
        },
      })
      .then((response) => {
        this.setData(response.data);
        console.log(this.repos);
      })
      .catch((error) => console.log(error));
  },
};
</script>

<style></style>

Im sorry friends, let me ask something. I am use vue js and i will fetch data from api github. In my method with name "seachData()" and Mounted part, i use axios. But i don't know, i got an error if i fill the input tag like this

 <input
      
      type="text"
      v-model="search"
      v-on:keyup.enter="searchData"
    />

And my error said. my code has variable with null value. i those code i did not fill the input tag. So i hope you guys can help me.

CodePudding user response：