[Vuejs]-Trying to have Vue.js show options answers in two areas

it doesn’t work like that natively, but it’s easy to implement with a bit of javascript

http://jsfiddle.net/0k1uq7u9/3/

<h1>Chicago's Top Ten Wettest Years</h1>
<div id="rain_fall">
    <span>Select year of rain fall</span><select v-model="selected" @change="updateInformation">
        <option v-for="option in options" :value="option.value">{{ option.text }}</option>
    </select>
    <span>Amount of rain: {{ selected }}</span>
    <span>{{ information }}</span>
</div>

var vm;
vm = new Vue({
    el: "#rain_fall",
    data: {
        selected: '50.86',
        information: 'test',
        options: [
            {text: "2008", value: "50.86", copy: "test"},
            {text: "2011", value: "49.83", copy: "test2"},
            {text: "1983", value: "49.35", copy: "test3"},
            {text: "1970", value: "46.09", copy: "test4"},
            {text: "1954", value: "45.92", copy: "test5"},
            {text: "1883", value: "45.86", copy: "test6"},
            {text: "2001", value: "45.77", copy: "test7"},
            {text: "1993", value: "44.90", copy: "test8"},
            {text: "1982", value: "44.58", copy: "test9"},
            {text: "1885", value: "44.37", copy: "test10"}
        ]
    },
    computed: {
        // a computed getter
      copyInformationGetter: function () {
        return this.information
      },
    },
    methods: {
        updateInformation() {
        const index = this.options.findIndex(option => option.value === this.selected)
        this.information = this.options[index].copy
    }
   }

});

I would probably do it this way: use the whole data item as your selected and then you have the elements available to pull as you need them.

Setting the initial value takes a little special handling; if the options were available outside the Vue, you could initialize with options[0] (or whatever). You could also just do that in the created rather than looking for a specific value.

var vm;
vm = new Vue({
  el: "#rain_fall",
  props: {
    initialValue: {
    	type: String,
      default: '50.86'
    }
  },
  data: {
    selected: null,
    information: 'test',
    options: [{
      text: "2008",
      value: "50.86",
      copy: "test"
    }, {
      text: "2011",
      value: "49.83",
      copy: "test2"
    }, {
      text: "1983",
      value: "49.35",
      copy: "test3"
    }, {
      text: "1970",
      value: "46.09",
      copy: "test4"
    }, {
      text: "1954",
      value: "45.92",
      copy: "test5"
    }, {
      text: "1883",
      value: "45.86",
      copy: "test6"
    }]
  },
  methods: {
    setSelected(value) {
      this.selected = this.options.find(o => o.value === value);
    }
  },
  created() {
    this.setSelected(this.initialValue);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<h1>Chicago's Top Ten Wettest Years</h1>
<div id="rain_fall">
  <span>Select year of rain fall</span>
  <select v-model="selected">
    <option v-for="option in options" :value="option">{{ option.text }}</option>
  </select>
  <span>Amount of rain: {{ selected.value }}</span>
  <span>{{ selected.copy }}</span>
</div>