dependency_analysis/js/src/vue_components/graph_outbound_input.vue

<!-- Copyright 2020 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<template>
  <div class="user-input-group">
    <label for="filter-outbound">Change outbound (yellow) depth:</label>
    <input v-model.number="outboundDepth" type="number" id="filter-outbound">
    <button @click="submitOutbound" type="button">Update Outbound</button>
  </div>
</template>

<script>
import {CUSTOM_EVENTS} from '../vue_custom_events.js';

const GraphOutboundInput = {
  props: ['outboundDepthData'],
  data: function() {
    return this.outboundDepthData;
  },
  methods: {
    submitOutbound: function() {
      this.$emit(CUSTOM_EVENTS.OUTBOUND_DEPTH_UPDATED, this.outboundDepth);
    },
  },
};

export default GraphOutboundInput;
</script>